[나도 프로그래머] 리액트 3. 구조분석

[나도 프로그래머] 리액트 3. 구조분석 | Ecency

https://programmers.co.kr/learn/courses/944
오늘 진도는 노마드 형님의 이 강의의 5강 정도가 될 것 같아요.

우리가 create-react-app 으로 만들었던
my-app의 구조를 분석해보겠습니다.

폴더는 node-modules / public / src 이렇게 돼있져.
node-modules 는 지원 패키지... 즉 외부에서 지원받는 용이라서
패키지 설치 안 됐을 때나 버전 문제 등이 발생했을 때 빼고는 잊어주시면 됩니다.

그리고 public 폴더는 html에서 정적파일을 보관하는 폴더져.
index.html이 들어있어요. index.js 하고요.

그리고 src 폴더가 source 즉, 소스 폴더로서
컴포넌트(각각의 작업)를 만드는 곳입니다.
App.js도 여기에서 나왔죠.

그런데 궁금한 점이 생깁니다.
보통 웹을 띄울 때, 제일 처음에 띄우는 메인 파일은 index.html 입니다.
그런데 우리는 어째서 App.js를 수정해서
메인 페이지를 바꿀 수 있었을까요?

이 의문은 간단하게 해결되는데요.

index.html 파일에 보시면 idroot 라고 지정하고 있고요.
참고로 index.html 안의 idroot 부분입니다. ^^
![re0.jpg()

index.js에 가시면 id가 root인 곳에서 App 컴포넌트를 출력해주고 있습니다.
결과적으로 index.html를 부르면 App.js도 같이 불러오는 거죠. ^^
그래서 App.js를 수정하면 웹 페이지가 수정되는 거였습니다.

각 파일은 컴포넌트 1개씩을 만듭니다.
여기서 우리가 만들려는 영화 앱은
영화 리스트, 영화 카드, 이미지
이렇게 3개의 컴포넌트를 만들려고 합니다.

App.js 같은 파일도 3개가 있겠져.
App.js는 영화 리스트로 만들고요.
나머지 2개 파일은 우리가 새로 만들어줘야 됩니다.

먼저 App.js를 분석해봅시다.

맨 위를 보시면 import 부분이 있어요.

import 부분.jpg

import 는 밖에 있는 걸 갖다 쓰겠다는 의미입니다.
import 리액트는 리액트를 사용하겠소.
그냥 리액트라고 되어있으니깐 이건 미리만들어진 모듈 같은 의미구요.
import ./ 이렇게 된 것은 파일을 읽어오는 겁니다.
여러분 폴더에 그 파일이 있어야지 읽어옵니다.

logo는 그냥 그림이고요.
App.css는 이 페이지를 디자인하는 파일입니다.
파일 지워버리면 못 읽어옵니다. 이름도 바꿀 수 있고요.

그리고 맨밑에 export

export 부분.jpg