생각없이 강의를 듣다가 어느날 문득 의문이 들었다.
'왜 index.js 파일에 코드를 적지?'
폴더 구조의 대략적인 정보와 중요 파일 2대장의 쓰임새를 알 필요가 있었다.
전체 디렉터리
- node_modules
리액트에서 사용할 수 있는 모듈들이 위치. - public
static 자원 폴더. 정적 파일들이 위치.- HTML이나 이미지 등을 위치
- src
실질적으로 화면에 보여질 내용들을 작업하는 폴더.- 작업한 js 관련 컴포넌트를 app.js에 참조하고, index.js에 최종적으로 모든 파일들(js, css 등)을 한 곳에 참조한다.
App.js
src 폴더에 있다.
컴포넌트를 정의하는 작업 파일.
실제로 화면에 표시되는 내용 등은 여기에서 정의된다.
function App()의 App은 컴포넌트의 이름을 말한다.
어떤 컴포넌트를 만들 것인지에 따라 컴포넌트의 이름도 함께 변경해야 한다.
index.js
src 폴더에 포함되어 있다.
메인 프로그램이라고 할 수 있다.
여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.
실제 작업을 하지 않고, 작업한 코드를 불러오는 역할이다.
index.html
public 폴더에 있다.
메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다.
이 파일이 직접 표시되는 것은 아니고, index.js에 의해 읽어 와서 렌더링된 결과가 표시된다. (index.html 이름을 바꿀시 오류발생)
가상 DOM을 위한 html 파일 (빈 껍데기 파일)
