[React] 리액트 기본 디렉터리 및 파일 설명

[React] 리액트 기본 디렉터리 및 파일 설명

 

 

 

리액트 프로젝트를 만들기 위해 create-react-app 을 명령하면 생성되는 기본 파일들이 몇 개 있다.

오늘은 그 기본 파일에 대해 알아보자.

 

 

node_modules

node_modules라는 디렉터리에는 1,000여개에 달하는 폴더가 있고 그 안에는 엄청나게 많은 파일이 있다.

이 디렉터리는 리액트 프로젝트를 실행할 때 사용되는 dependency 모듈들이 모두 모여있는 폴더이다.

여기에 설치되어있는 모듈들은 package.json 파일의 dependencies 부분에 다 적혀있다.

그렇기 때문에 프로젝트를 깃에 올릴 때 용량이 큰 node_modules은 보통 지우고 올린다.

이 디렉터리를 지우면 프로젝트는 실행되지 않지만, package.json의 dependencies 부분에 잘 기록되어있기만 하면 npm install을 이용해 다시 설치할 수 있기 때문이다.

 

 

public > index.html

index.html은 public 디렉터리에 위치해있다.

body 부분에 id가 root인 div 태그가 있고, 이 밑으로 리액트 코드가 실행되어 만들어진 DOM이 구현된다.

 

 

src > index.js

리액트 프로젝트를 만드는 데 필요한 대부분의 작업은 이 src 디렉터리 안에서 이루어진다.

css, js, test 파일 등이 있다.

 

 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.js 파일을 보면 위와 같이 id가 root인 엘리먼트에 App을 렌더링 시켜준다는 부분이 있다.

이 root가 index.html에 있는 root이다.

 

 

src > App.js

index.js 파일을 보면 상단에 

import App from './App';

위와 같이 App.js를 불러오는 부분이 있다.

이로 인해 App.js에서 코드를 작성하면 npm start를 통해 띄운 브라우저에 바로 반영이 된다.

브라우저를 새로 고치지 않아도 업데이트된 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정을  HMR(Hot Module Replacement)라고 부른다.

 

 

 

(+추가) components

components (또는 component) 디렉터리는 기본 디렉터리는 아니다.

이는 리액트 프로젝트 작업 시 직접 만든 컴포넌트 파일들을 모아놓기 위해 만드는 폴더이다.

보통 src 디렉터리 안에 components 디렉터리를 만든다.