Chapter01. 리엑트 프로젝트 분석

<< 학습 목표 >>

1. 프로젝트 내 컴포넌트를 출력하는 태그를 찾을 수 있다.

2. 프로젝트 내 컴포넌트를 불러오는 JS 파일을 찾을 수 있다.

3. 프로젝트 내 컴포넌트를 찾을 수 있다.

---

웹 프로젝트 내 웹 페이지는 각자의 웹 페이지가 있지만

리엑트 웹 프로젝트 내 웹 페이지는 하나뿐임

그래서 SPA(Single Page Application) 라고 부름

 

리엑트는 화면에 보여줄 요소(Element / 컨텐츠)를 컴포넌트라고 부름

페이지별 컨텐츠를 컴포넌트로 만들어두고 컴포넌트를 id가 root인 div에 출력하는 방식

 

결국 따져보면 일반 웹 페이지는 페이지별 컨텐츠를 HTML 페이지에 만들어두는 것이고 리엑트 웹 페이지는 페이지별 컨텐츠를 컴포넌트에 만들어두는 것

 

페이지냐 컴포넌트냐의 차이일 뿐 결국 프로젝트의 규모가 커지면 페이지가 많아지듯 컴포넌트가 많아짐

그러나 리엑트는 그 이상의 많은 장점이 있음

그 장점에 대해서는 리엑트의 제일 마지막에 얘기할 것

---

리엑트 프로젝트가 어떤 구조로 되어있길래 SPA가 가능한지 프로젝트 구조를 살펴보자

우리가 만든 프로젝트를 열어보면 가장 위에 다음과 같이 3개의 폴더와 몇개의 파일이 보임

 

여기서 public 폴더(1)를 열어보면 다음과 같이 하위 파일들이 있음

 

여기서 index.html 파일을 열어보면 위에서 언급했던 아이디가 root인 div 태그(1)가 있음

이 div를 통해 내가 만든 컴포넌트가 상황에 따라 출력됨

 

이번에는 src폴더(1)를 열어보면 다음과 같이 하위 파일들이 있고 그 안에 index.js(2) 가 상황에 맞는 컴포넌트를 아이디가 root인 div에 출력하는 역할을 함

 

index.js 파일을 열어 보면 아래와 같은 코드들이 보임

출력할 컴포넌트를 불러오는 코드(1)

컴포넌트를 출력할 id가 root인 태그를 불러오는 코드(2)

id가 root인 태그에 불러온 컴포넌트 출력(3)

 

App.js 파일(1)을 열어보면(2) return 안에 출력할 컨텐츠(3)가 보임

 

출력할 컨텐츠를 다음과 같이 바꾸면(3) 화면에는 Hello React! 가 보임

---

여기까지 리엑트 프로젝트의 구조를 알아봤음

 

화면에 보여줄 컨텐츠는 컴포넌트 라는 요소로 추가를 하고 index.js에서 컴포넌트를 불러와 상황에 맞는 컴포넌트를 호출하면는 구조임

 

또 A 컴포넌트에서 B 컴포넌트를 호출해 A 컴포넌트의 특정 부분을 B 컴포넌트로 채울 수 있음

리엑트는 웹 페이지를 마치 레고 블록 조립하듯 할 수 있게 해준다는 장점도 있음