[React.js] index.js가 하는 일

index.js는 index.html파일이 열리고 나서 실행되는 파일로, React 코드들 중에서 가장 먼저 실행되는 친구라고 보면 된다. (참고 : index.html은 웹브라우저에서 가장 먼저 실행되는 파일이라 생각하면 됨)

import ReactDOM from 'react-dom';

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

 코드를 보면 react-dom이란 패키지로부터 디폴트로 export하는 객체를 ReactDOM이란 이름으로 import해서 그 객체의 render라는 메소드를 실행하고 있음을 볼 수 있다. render란 '화면을 그린다'라는 뜻인데, React에선 이 render메소드로 HTML태그를 만들어준다. 독특한 점은 render메소드의 첫 번째 파라미터로 문자열이 아니라 HTML태그를 그대로 작성했단 점인데, 사실 이것은 React에서 지원하는 JSX라는 문법이다. 여기선 일단 이것이 React에서 지원하는 특별한 문법이라고 생각하고 넘어가자.

 

 이어서 코드를 보면, getElementByID를 동해 root라는 아이디를 가진 요소를 파라미터로 넘기는 것을 볼 수 있다. 실제로 render메소드가 실행되면 첫 번째 파라미터를 통해서 HTML요소를 만들고, 이를 두 번째 파라미터에 집어넣는 방식으로 동작한다. index.html의 body태그를 보면 root라는 아이디값을 갖는 div태그를 볼 수 있는데, 바로 여기에 JSX를 통해 만들어진 HTML요소들이 들어가는 것이다. 

 

 

 

정리하자면,

 

1. 우선 React가 실행되면 브라우저가 index.html을 연다

2. index.js를 실행

3. index.js의 render함수가 실행되면서 첫 번째 파라미터(JSX로 작성된 것)을 HTML요소로 바꿔서 두 번째 파라미터에 넣음

 

보통 react의 render메소드는 index.js에서 한 번만 실행되므로 굳이 사용법을 외울 필욘 없다.