React 기본 개념 정리 (5) 리액트 프로젝트 파일

처음 리액트를 다운받고 실행해보면 너무나 많은 파일들이 있다는 것을 알 수 있다. 

index.js

app.js

package.json

index.html

styles.css

 

필자도 처음에 어떤 게 먼저 작동되고 원리가 무엇인지 애를 먹었다.

하나씩 천천히 살펴보자.

 

1. Index.js : 앱의 진입점

    리액트 앱을 실행할 때 가장 먼저 실행되는 파일이다.

2. App.js : 메인 컴포넌트

    일반적으로 전체 앱의 구조를 잡아주는 역할을 한다. 여러 개의 컴포넌트를 불러와서 조합하는 장소.

3. package.json : 프로젝트의 정보와 의존성 관리

    어떤 라이브러리를 설치했는지 기록해 둔 파일이다. 사실 리액트 코딩할 때 건드리는 부분은 아니기에 크게 신경 쓸 필요 없다.

4. index.html : 실제 웹 페이지의 기본 HTML

    우리가 아는 그대로 리액트 앱이 렌더링 되어 화면에 나타나는 부분이다.

5. styles.css : CSS 스타일 파일

    우리가 아는 그 스타일 관리용 파일이다. 글씨를 꾸며는 등 디자인을 위한 영역

 

리액트는 SPA(Single Page Application), 즉 웹 페이지를 처음 한 번만 로드하고 이후에는 필요한 부분만 자바스크립트가 동적으로 바꾸는 웹 애플리케이션이다. 결국에는 index.html 내부에서 실행되기에 index.js -> App.js -> index.html 이런 순서로 동작한다.

 

예제를 보면 더 쉽게 알 수 있다.

 

파일 구조가 이렇다고 가정해보자.

my-react-app

     -index.html

     -index.js

     -App.js

     -styles.css

     -package.json

 

• index.html (리액트가 렌더링 될 공간, 이 안에서 리액트 앱이 작동할 것)

 

 

         body 에서 id 를 root라고 정했다.(개발자들 사이에서 관습적으로 id를 root로 정한다)

         이곳에서 리액트가 렌더링 될 것이다. 다시 말하면 id = "root"인 <div> 안에 리액트 컴포넌트가 들어올 것!

•  index.js (앱의 시작점, 리액트 실행)

 

• App.js (메인 컴포넌트)

       

 

 

• styles.css (스타일 파일)

 

 

 

1) 브라우저가 index.html 읽음

2)index.html에서 <script src = "index.js"> </script> 실행

3)index.js가 App.js 불러옴

4)App.js가 return한 내용이 <div id = "root"> 안에 들어감

5)스타일(styles.css) 적용됨