Movie_app

React 시작

node js와 git 설치 후 진행

node -v

Node JS 버전 확인

---

npm -v

npm 버전 확인

---

npm install npx -g

npm를 이용해 npx 설치

npx -v

npx 버전 확인

---

git —version

git 버전 확인

---

C:\Users\82107>cd Documents

C:\Users\82107\Documents>npx create-react-app moive_app_2021

 

Documents 경로에 "movie_app_2021"이라는 react를 위한 디렉토리 생성

code (디렉토리) ex) code . / code movie_app_2021

vscode에서 react 시작

---

npm start

react 브라우저 (vscode terminal에서 작성)

git 연결

git init

깃 저장소 초기화

---

repository 생성 package.json의 name을 repository name으로 넣는 걸 추천

repository링크 복사 후

git remote add origin 링크

git add .

git commit -m "커밋 내용 넣기"

component : HTML을 반환하는 함수 (ex. <APP />

javascript와 HTML 사이의 조합을 jsx라 함

component 생성

src에 새로운 component 이름으로 js 생성

compoenet 사용시 import Component from "./Component";

react application이 하나의 componenet(App)만을 rendering하기 때문에 여러 개의 component를 한 번에 사용할 수 없음 → 그래서 App안에 넣어서 사용

굳이 새로운 js 파일 만들지 않고 App.js에서 function여러 개 만들어서(component 여러 개) 사용해도 무방

동적으로 component

component → component/child component

import React from "react";

function Food({ fav }) {
  return <h1>I like {fav}</h1>
}
function App() {
  return (
  <div>
    <h1>Hello</h1>
    <Food fav="kimchi" />
    <Food fav="ramen" />
    <Food fav="samgiopsal" />
    <Food fav="kimbab" />
  </div>
  );
}

export default App;

 

import React from "react";

function Food(props) {
  return <h1>I like {props.fav}</h1>
}
function App() {
  return (
  <div>
    <h1>Hello</h1>
    <Food fav="kimchi" />
    <Food fav="ramen" />
    <Food fav="samgiopsal" />
    <Food fav="kimbab" />
  </div>
  );
}

export default App;

웹사이트에 동적 데이터를 추가하는 방법

어떻게 object의 list를 가져오는가? component를 동적으로 rendering

map : array의 각 item에서 function을 실행하는 array를 가지는 javascript function이며 그 function의 result를 갖는 array를 나에게 줌

npm i prop-types

prop-type 설치 : 전달받은 props가 내가 원하는 props인지를 확인

setState()

setState를 호출하면 compoenent를 호출하고, 먼저 render를 호출한 다음 업데이트가 완료되었다고 말하면 componentDidUpdate가 실행됨

axios

fetch 위에 있는 작은 layer