[React] Component

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>안녕 리액트!</h1>, document.getElementById('root'));

import ReactDOM from 'react-dom';

const element = <h1>안녕 리액트!</h1>;

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

결과 동일

 

import ReactDOM from 'react-dom';

const element = <h1>안녕 리액트!</h1>;

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

- Console 화면에서 확인해보면, JavaScript 객체가 출력된 것을 확인 할 수 있음

- React에서는 객체를 React element로 보내고 React element를 ReactDOM의 render 메소드로 전달하면 React element가 객체를 해석해서 html로 렌더링함.

 

 

React componet

import ReactDOM from 'react-dom';

function Hello() { // React component
  return <h1>안녕 리액트</h1>;
}

const element = ( //함수이름을 가진 tag 사용 가능
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

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

React component 조건

- 함수 이름 첫글자 무조건 대문자

- JSX 문법으로 만든 React element 리턴해야함