컴포넌트 문법

리엑트 엘리먼트
: JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다.

 

import ReactDOM from 'react-dom';

const element = <h1>리액트!</h1>;
ReactDOM.render(element, document.getElementById('root'));

이 리엑트 엘리먼트를 ReactDOM.render 함수의 아규먼트로 전달하게 되면
리엑트가 객체 형태의 값을 해석해서 html 형태로 브라우저에 띄워준다. 

리엑트 엘리먼트는 리엑트로 화면을 그려내는데 가장 기본적인 요소이다. 

 

 

리엑트 컴포넌트
: 리엑트 엘리먼트를 좀 더 자유롭게 다루기 위한 하나의 문법이다.

 

import ReactDOM from 'react-dom';

function Hello() {
  return <h1>리액트</h1>;
}

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

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

컴포넌트를 만드는 가장 간단한 방법은 자바스크립트의 함수를 활용하는 거다.
JSX 문법으로 작성된 하나의 요소를 리턴하는 Hello 함수가 바로 하나의 컴포넌트이다. 

- 컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수 있다.
- 모듈 문법으로 활용하면 훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드를 작성할 수 있다.

 

function Dice() {
  return <div>리엑트</div>;
}

export default Dice;

 

주의할 점
: 리엑트 컴포넌트의 이름은 반드시 첫 글자를 대문자로 작성한다.