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

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 파일에 보시면 id==root 라고 지정하고 있고요.
참고로 index.html 안의 id==root 부분입니다. ^^
![re0.jpg(https://ipfs.busy.org/ipfs/QmYcMikEchTB7z5Uxd2RJPaLM6WbWX5Ek8RioNXWrM98sf)

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

여러분이 밖에 있는 걸 갖다쓴 것처럼
App 컴포넌트를 갖다쓰고 싶은 파일도 있겠져.
그래서 export를 걸어주는 겁니다.

우리 작업을 예로 들면 컴포넌트가 3개가 있잖아여.
다른 컴포넌트에서 우리 App.js의 컴포넌트를 읽어야 될 수 있으니
미리 export 해두는 겁니다.

파일 보시면 거의 대부분
import export 쌍으로 되어있습니다.

그리고 중요한 중간 부분입니다.
자바 스크립트 안에 html 이 있습니다.
이걸 JSX라고 합니다.

정확히 html은 아니고
html에

태그를 덮은 거라고 보시면 됩니다.
JSX라고 합니다. 자바스크립트 확장입니다.

자, 그러면 최소코드로 만들어 보겠습니다.

이게 최소 코드고요.
이렇게만 해도 잘 실행됩니다. ㅎㅎㅎ

class App extends Component
이게 앱 컴포넌트 입니다.
모든 컴포넌트는 render function 을 갖고 있습니다.
render는 보여주는 거죠.
그리고 항상 return 이 있어야 됩니다.
그래서 위의 코드가 최소단위인 거죠.

감사합니다.