#2 리액트 앱의 기본 구조

 create-react-app을 이용하여 개발 환경을 세팅했다면 리액트 애플리케이션의 가장 기본적인 구조를 살펴볼 수 있다. 처음 만들었다면 node_modules, public, src 폴더가 있을 것이고 빌드를 한번이라도 했다면 build 폴더도 있을 것이다.

 

node_modules

 

 node.js 모듈이 들어있다. 정확히는 모르겠지만 react를 설계할 때 node.js를 어느정도 베이스를 두고 만든 것 같다. 참고로 react는 javascript 라이브러리이다. 아직 초보자 단계에서는 건들 것이 없으며, 개발에 그닥 큰 영향을 끼치는 것도 아니니 그냥 넘어가자.

 

public

 

 public 디렉토리를 살펴보면 여러가지 잡다한 것들이 많이 들어있지만 이 중 가장 중요한 것은 index.html 이다. 리액트 앱은 실행되면 가장 먼저 public 디렉토리에서 index.html을 찾아 랜더링을 시작한다. 떄문에 public의 index.html은 개발 단계에서 굉장히 중요한 역할을 한다. 물론 딱히 수정할게 있는 것은 아니다.

 

 index.html에서 눈여겨 봐야할 것은 id가 root로 설정되어 있는 div 태그이다. 리액트의 주축이 되는 개념인 '컴포넌트'들은 index.js에 의해 index.html 안에 존재하는 root 태그에 위치하게 된다. 물론 index.js를 수정하면 id가 root가 아닌 다른 것으로 변경할 수 있다.

 

src

 src 폴더는 보통 컴포넌트를 만들 때 쓴다. 위에 보이는 Component는 기본 생성이 아니라 내가 그냥 만든거다. 실제 개발할 때에는 코드의 재사용성과 유지보수의 용이함을 확보하기 위해 Component 디렉토리와 같이 컴포넌트들을 담는 폴더를 만들고 컴포넌트 하나하나 파일로 분리하여 개발하는 것이 좋다. 저 많은 파일들 중에 눈여겨 봐야할 것은 index.js와 App.js이다. 나는 디자인은 별로 안하는 편이기 때문에 css파일은 다루지 않겠다.

 

 먼저 index.js를 보면 아까 봤던 것 처럼 리액트 DOM이 id가 root인 태그로부터 렌더링 된다는 것을 알 수 있다. 때문에 저기 보이는 root를 변경하면 다른 id를 가진 태그에서도 렌더링이 가능하다. 첫번째 인자인 App은 우리가 만든 모오오오오든 컴포넌트의 집합체, 그러니깐 우리가 만들려고 하는 서비스의 본체라고 보면 된다.

 

 App.js에는 우리가 실제 코드를 구현하게 된다. 보통 컴포넌트를 구현하는데에는 함수형과 클래스형 두가지 방법으로 나뉘는데 나는 클래스형으로 할꺼다. Component를 상속받은 App Class가 보일텐데 저게 바로 어플리케이션의 본체이다. 필요한 컴포넌트를 만들고 App에 최종적으로 덕지덕지 발라주면 어플이 완성된다. 컴포넌트를 만들면 상단에 import해서 쓰면 되고, 하단에 export를 써주어야만 다른 컴포넌트에서 나를 써먹을 수 있게된다.