[노마드코더] React JS로 영화 웹 서비스 만들기 #2

React JS의 동작 원리(?)

• virtual이고 존재하지 않는다.

• 그래서 빠름!

• App.js와 index.js 파일이 있는데, 그 중 App.js 파일의 div에 아무리 뭐라고 써도 html에서는 안 보인다. (virtual)

• vsc에서 저장하는 순간 바로 웹에서 자동으로 새로고침 됨. 신기신기

(궁금) 니꼬가 vsc에서 터미널1 : node, 터미널2 : zsh 를 왔다갔다 하는 것 같은데 왜 그런거지..?

 

React JS 살펴보기

• 꼭 npm start 하고 그대로 두어야 함. 그게 서버이기 때문!

• react는 component와 함께 동작한다. 모든 것은 component다.

• component란, HTML을 반환(return)하는 함수다.

• react는 component를 사용해서 HTML처럼 작성하려는 경우에 필요.

> JAVASCRIPT와 HTML 사이의 이러한 조합을 JSX라고 한다. (자바스크립트 안의 HTML)

 

component 만들기

• import React from "react"; 를 꼭 해줘야 한다. 안 하면 react는 이해를 못한다.
• react application은 하나의 component만 렌더링해야한다.
• 그래서 두 개 사용하고 싶으면 Application component (App.js) 안에 import 해서 사용하면 된다.

• component를 계속 반복해서 사용할 수 있다. 복붙하지 않고, 자동으로 반복되게 할 수 있다.

 

 

위 방법은 효율적이지 않다. 새로운 음식을 추가할 때마다 복붙해야하기 때문.

게다가 이 데이터들은 우리가 갖고 있는 게 아니라 웹사이트에서 온 데이터들이기 때문에, 우리한테 없는 데이터를 복붙할 수도 없다.

 

웹사이트에 동적 데이터 추가하기

(데이터가 API에서 왔다고 가정)

자바스크립트의 오브젝트 키값을 불러오는 것처럼 사용함. 약간 다른 점은 { } 중괄호를 사용함!

알 듯 말 듯 모르겠다. 😞 

핵심은 어떤 틀 안에서 변하는 부분만 key를 이용해 동적으로 바꿔준다는 것. (복붙X)

그 데이터는 오브젝트의 배열로 이루어져 있다는 것.

 

알맞은 props를 보냈는지 체크하기 위해 prop-types 설치, App.js에 import해서 사용한다.