ReactJS 기초 2 : 영화 웹 서비스 만들기

Requirements

LIMHYOSUNG@DESKTOP-6J28LFI MINGW64 ~/VS_Projects
$ node -v
v14.17.3

LIMHYOSUNG@DESKTOP-6J28LFI MINGW64 ~/VS_Projects
$ npm -v
7.24.1

LIMHYOSUNG@DESKTOP-6J28LFI MINGW64 ~/VS_Projects
$ npx -v
7.24.1

LIMHYOSUNG@DESKTOP-6J28LFI MINGW64 ~/VS_Projects
$ git --version
git version 2.28.0.windows.1

SETUP

• npm init react-app {프로젝트명}
• npm create-react-app .은 현재 파일에 설치한다는 의미.

• scripts에서 사용될 키워드는 start, bulid

Creating a Github Repository

1. git init

2. 깃허브에서 레포지토리 만들기(이미 생성한 파일과 같은 이름의 레포지토리 생성을 권장함).

3. git remote add origin {레포지토리 URL}

4. git branch -m master main →git add . → git commit -m "{커밋 메시지}" → git push origin main

React work

• index.html에 작성한 component를 HTML로 밀어 넣음.

• 이처럼 HTML에 존재하지 않지만 밀어넣어 virtual DOM에서 component를 보여줌.

JSX & PROPS

Component

• component는 HTML을 반환하는 함수임.

• component의 형태는 </>를 따름.

• react는 component를 사용해 HTML처럼 작성하는 경우에 필요함. JS와 HTML 사이의 이러한 조합을 jsx라 부름.

• component 파일을 만들 땐 항상 import React from "react";를 입력해야 함. react가 jsx가 있는 component라는 것을 알려주기 위함.

• react application은 한 번의 하나의 component만 rendering할 수 있기 때문에 모든 것은 App안에 들어가야 함.

• 재사용 가능한 component를 무한히 만들 수 있음.

Props

• <Food fav="kimchi" />는 Food 컴포넌트에 fav라는 이름의 props(property)를 kimchi라는 value로 준 것임.

• fav와 같은 props은 무한히 생성할 수 있으며 해당 컴포넌트의 argument로 전달됨.

• props 내부는 구조 분해를 통해 간단하게 불러올 수 있음. ex) Food({ fav })

Dynamic Component Generation

• map을 이용하여 object를 동적으로 출력할 수 있음.

• 이때 각 component는 고유해야 하므로 key를 가지고 있어야 함.

Memo

• 커스텀 컴포넌트는 props만을 만듦.

• onClick도 props일뿐 이벤트가 되려면, HTML에 onClick을 파라미터로 전달하여 이벤트를 등록해야 함.

• 부모 상태가 변경되면 자식 모두가 재실행됨. 불필요한 render를 줄이기 위해 const MenorizedBtn = React.memo(Btn) 등 상태를 저장할 수 있음.

Protection with PropTypes

• npm i prop-types

• 전달받은 props가 원하는 props인지를 확인해줌.

import PropTypes from 'prop-types';

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number
}

• 이 외에도 많은 것을 참고할 수 있음.

STATE

• 데이터가 저장되는 곳.

• useState에서 반환하는 데이터를 출력하면 [undefined, f]라는 배열이 반환됨. undefined는 data이고 fuction은 data를 바꿀 때 사용하는 함수임.

• 이전에 변수를 정의하고 변화가 일어날 때 마다 render 함수를 불러주는 것보다 효율적으로 동작함.

• setState는 업데트할 값을 인자로 받아 업데이트하는 함수임. setState 함수를 가지고 state를 변경할 때 컴포넌트가 재생성됨(새로운 값으로 리랜더링).

State Functions

• 현재 값을 가지고 계산해야 한다면 리액트가 current라는 보장된 현재 값으로 계산을 할 수 있도록 하는 게 안전함.

• 함수를 사용하지 않으면 다른 곳에서 해당 변수를 수정할 경우 오류를 잡기 힘듦.

const onClick = () => {
	//X
	setCounter(counter + 1);
	//O
	setCounter(current => current + 1);
}

JSX가 HTML과 다른 점

• class, for등 예약어는 사용할 수 없음.
• 대신 className, htmlFor을 사용해야 함.

style 추가

• import를 사용하여 style을 모듈 형식으로 추가해줄 수 있음.

• 이때 class명이 같더라도 react에서 고유한 문자로 변환해주기 때문에 컴포넌트 간의 이름이 겹치는 문제는 신경쓰지 않아도 됨.

EFFECTS

• api 호출 등 코드를 한 번 실행한 후 다시 실행하고 싶지 않을 때 유용함. 또는 component 안에 특정 데이터가 변화할 때 실행해야 하는 경우에 사용됨.

• useEffect는 두 개의 argument를 가짐.
• 첫번째는 실행시키고 싶은 코드.
• 두번째는 dependenices임. dependenices는 react js가 지켜봐야하는 것임. 이들이 변화할 때, react js가 코드를 실행시킴. 만약 dependencies가 공백인 배열이라면 처음 실행되고 끝남. dependenices에는 useState에서 정의한 상태가 들어감. 이는 setState와 연결되어 상태 변경을 감지함.

useEffect(() => {
  console.log("hi :)");
  return () => console.log("bye :(");
}, []);

• component가 create 됐을 때 hi를, destroy 됐을 때 bye를 출력함 → create, destroy 시점을 알 수 있음.

• 참고로 hide와 show를 할 땐 create와 destroy가 반복됨.

Router

• npm install react-router-dom

• 페이지를 전환함. URL을 보고 있는 component임.

• Link는 브라우저의 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트.

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Detail from "./routes/Detail";
import Home from "./routes/Home";
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/movie">
          <Detail />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

import { Link } from "react-router-dom";
function Movie({ title, coverImg, summary, genres }) {
  return (
    <div>
      <div>
        <h2>
          <Link to="/movie">{title}</Link>
        </h2>
        <img src={coverImg} alt={title} />
        <p>{summary}</p>
        <ul>
          {genres.map((g) => (
            <li key={g}>{g}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

• useParams을 사용하면 React Router는 path의 id값을 넘겨줌.