React) 디렉토리 구조 및 주요 파일

1. 리액트 프로젝트의 기본 구조

 1) project

  index.html이 존재하는 디렉토리

 2) src

  모든 소스코드가 존재하는 디렉토리

 3) build

  빌드할 경우 해당 디렉토리 하위에 빌드 파일들이 생성된다.

 

---

2. 리액트 프로젝트의 주요 파일

 1) index.html

 index.html 파일의 소스코드를 열어보면, 실상은 별다른 코드가 없다. 이는 이 한페이지 속에서 많은 코드가 숨어있기 때문이다. 이 div#root 하위에 들어갈 내용들은 src 디렉토리 하위에 작성하는 파일들에 의해 구성된다. '<div id="root"></div>' 를 기억하자.

 

2) index.js

 익숙한 단어가 보일 것이다. 좀전에 index.html에서 보았던 'root'는 여기서 찾을 수 있다. 리액트에서는 일부 화면을 컴포넌트화하여 사용할 수 있다. 우선은 import 단의 넷째 줄을 살펴보자. './App'은 뒤에 '.js'가 생략된 것으로, App.js에서 부터 'App'을 가져온 것이다. 이 App은 이후에 알아보겠지만, App.js에서 정의한 컴포넌트이다. 7번째 라인에 존재하는 'ReactDOM.render(ComponentName, DOM Element)'는 인자로 받은 해당 컴포넌트(사용자 정의 태그)를 해당 DOM Element 자리에 넣어서 보여주겠다는 의미를 가진다.

 참고로 App.js로부터 import되어진 컴포넌트명은 ReactDOM.render 함수의 인자로 들어가는 사용자 정의 태그명과 일치해야 하며, 이 컴포넌트명은 대문자로 시작해야 한다.

 

 

3) App.js

 App.js에서는 컴포넌트들을 생성할 수 있다. 컴포넌트를 생성하는 방식으로는 함수형(Function Type)과 클래스형(Class Type)이 존재한다.

함수형

클래스형

App.css는 App.js에 작성된 컴포넌트들이 로드될 때 함께 로드된다.