[리액트 react] 리액트 앨리먼트 / 컴포넌트

  리액트 엘리먼트

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>뚝딱이가 리액트 한다</h1>, document.getElementById('root'));

위 코드를 아래 처럼 바꿀 수 있다.

import ReactDOM from 'react-dom';

const element = <h1>뚝딱이가 리액트 한다</h1>;

ReactDOM.render(elemnet, document.getElementById('root'));

 

• JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다 = 리액트 앨리먼트
• 리액트 엘리먼트를 ReactDOM.render 함수의 아규먼트로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워준다.
• 리액트 엘리먼트는 리액트로 화면을 구성하는 데에 있어서 기본적이면서도 핵심적인 요소이다.

 

 

 

  리액트 컴포넌트

import ReactDOM from 'react-dom';

function Say() {
	return <h1>뚝딱이가 리액트 한다</h1>;
}

const element = (
	<>
		<Say />
		<Say />
		<Say />
	</>
);

ReactDOM.render(elemnet, document.getElementById('root'));

• 리액트 앨리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법.
• 리액트 엘리먼트를 함수형태로 나타내면 JSX문법을 작성할 때 커스텀태그처럼 활용할 수 있다.
• 리액트 엘리먼트를 리턴하는 Say라는 함수를 만들어서, 엘리먼트 변수에 함수 이름을 가진 태그를 사용할 수 있다.
• 이런 특성을 모듈 문법으로 활용하면 훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드를 작성할 수 있다.
• 이때 Say라는 함수를 '리액트 컴포넌트'라고 한다.
• 리액트 컴포넌트는 단순히 함수를 만든다고 해서 모두 리액트 컴포넌트가 되는 것이 아니고, 함수 이름의 첫 글자를 꼭 대문자로 써야 하며 JSX로 만든 리액트 엘리먼트를 리턴해야 한다.
• 컴포넌트로 화면을 구상할 때 목적에 따라 코드를 세분화 할 수 있고, 재사용할 때도 유용하다.

 

 

 

  컴포넌트 불러오는 방법

import Tooktak from './Tooktak';

function App() {
  return (
    <div>
      <Tooktak />
    </div>
  );
}

export default App;

• return 뒤에 ()를 사용하면 여러개의 태그들을 사용할 수 있다.
• 맨 상단에 import문을 입력하여 해당 파일에서 사용할 컴포넌트를 불러온다.
• 맨 하단에 export문을 입력하여 해당 파일을 다른 파일에서도 불러올 수 있도록 할 수 있다.

 

 

 

 

  컴포넌트에서 이미지 사용하는 방법

import tookImg from './assets/tooktak_image.svg';

function Picture() {
  return <img src={tookImg} alt="뚝딱 사진" />;
}

export default Picture;

• 맨 상단에 import로 이미지를 불러와서 사용해야 한다.
• img 태그의 src 속성에 바로 이미지 경로를 입력하면 사진이 보이지 않으니 기억하자.