React 시리즈의 1에서의 환경구축이 끝났다면 본격적으로 React를 시작해보도록 하겠습니다.
react 구동하기
npm start위 명령어를 터미널에서 시작하여 react를 구동해보겠다.
위 명령어는 현재 나의 경로가 react app 안으로 들어와있어야한다.
react app 구조 알아보기
npm start 명령어를 실행하면 src/index.js를 먼저 찾게된다.
index.js 안의 코드이다. npm start 명령어로 나타난 페이지는
React.StrictMode안에있는 App 때문이다. App을 지우고 저장해보면 페이지가 흰바탕으로 변하는것을 알 수 있다.
이 App태그는 index.js 페이지 위에서 import 하고있기에 사용가능한것이다.
'./App' 을 import하고 있는데 이때 뒤에 .js는 생략됐다고 생각하면된다. 같은 폴더에 위치한 App.js로 이동해보자.
이제 index.js와 다르게 여러 html태그들을 확인할 수 있는데 바로 이 태그들이 npm start 명령어를 실행했을때 볼 수 있는 태그이다.
개발자 도구에서 확인하면 일치하는 것을 알 수 있다.
여기서 눈치가 빠르신분은 의문이 생기는 점이 있을것이다.
div class = 'App'부터가 App.js 태그라는 사실을 말이다.
그러면 이 태그를 감싸고 있는 div id='root' 부모태그는 어디서 오는걸까?
정답은 바로 public 폴더안에 있는 index.html 파일이다.
index.html 파일로 이동해보자
위 사진은 index.html의 body태그 부분이다. 바로 여기에 우리가 찾던 div id='root'가 존재하는 것을 알 수 있다.
정리해보자면 src폴더의 App.js안에 구현된 태그들은 index.js에서 import 되어 사용되어지고 index.js에 있는 것들이 public 폴더안에 있는 index.html의 div id='root'태그의 자식으로 존재하게 되는것이다.
그림으로 표현해보면 다음과 같을 것이다.
다음 시리즈에서 더 알아보도록 하겠다.
