[유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 2 ~ 섹션 7)

섹션 2: React 시작하기

11. 2-2. 첫번째 리액트 앱 만들기

Vite

• 빌드 도구.
• 리액트 프로젝트 제작시 필요한 도구들이 자동으로 세팅되어 있는 리액트 앱을 생성해 준다.

Vite를 이용한 리액트 앱 생성 명령어

npm create vite@latest

 

생성된 앱에는 node_modules 폴더와 package.json, package-lock.json이 없으므로 직접 생성해 주어야 한다.

 

설치 명령어

npm install

 

vite.config.js: vite 설정 파일

 

리액트 앱 실행 명령어

npm run dev

→ 터미널에 뜬 주소를 복사해서 웹 브라우저에서 실행시킬 수 있다.

 

리액트 실행중단: q

 

 

섹션 5: React 라이프 사이클

useEffect

  useEffect(() => {
    console.log(count);
  }, [count]); //의존성 배열(Deps)

  const onClickButton = (value) => {
    setCount(count + value);
    console.log(`카운트: ${count}`);
    //useEffect가 필요한 이유!
    //count+value 변경된 값을 그대로 사용할 수 없음(상태변화 함수가 비동기이므로)
  };

 

라이프사이클

1. 마운트(탄생)

//1. 마운트
  useEffect(() => {
    console.log("마운트");
  }, []);

2. 업데이트(변화, 리렌더)

//2. 업데이트(변화, 리렌더) 제어
  //코드 업데이트 시점에만 실행되도록 하는 useEffect
  useEffect(() => {
    if (!isMountRef.current) {
      //아래 코드의 가드 역할
      isMountRef.current = true;
      return; //아래 코드가 실행되지 않음
    }
    console.log("업데이트");
  });

3. 언마운트(죽음)

//3. 언마운트(죽음)
  useEffect(() => {
    //첫번째 콜백함수의 언마운트 시 실행되는 콜백함수 리턴
    return () => {
      console.log("언마운트");
    };
  }, []);

 

실습 코드

 

25. 5-1. useEffect - 라이프 사이클 제어하기 · Yoonyesol/React-Next-Study@7944c36

 

 

섹션 6: React Hook

콜백함수: 다른 함수의 인수로 전달되는 함수

 

Custom Hooks가 필요한 이유

여러 컴포넌트에서 react hook (useRef, useEffect, useState,,,) 을 사용한 동일한 코드를 필요로 할 때의 제약사항 때문.

제약사항: React Hooks는 일반 함수(컴포넌트)에서 호출불가

 

React Hooks는 컴포넌트의 내부, 또 다른 React Hook(Custom Hook 포함)에서만 호출할 수 있다.

따라서 Custom Hook을 만들어 로직을 분리한 뒤 필요한 컴포넌트에서 사용하는 방법을 택한다.

 

Custom Hook 만들기

useUpdate.js

import { useEffect, useRef } from "react";

export default function useUpdate(cb) {
  const isMountRef = useRef(false); //값을 저장하는 레퍼런스 객체로 useRef 사용
  //2. 업데이트(변화, 리렌더) 제어
  //코드 업데이트 시점에만 실행되도록 하는 useEffect
  useEffect(() => {
    if (!isMountRef.current) {
      //아래 코드의 가드 역할
      isMountRef.current = true;
      return; //아래 코드가 실행되지 않음
    }
    console.log("업데이트");

    cb(); //매개변수로 받은 콜백함수 실행
  });
}

 

사용

App.jsx

...
import useUpdate from "./hooks/useUpdate";

function App() {
  ...
  useUpdate(() => console.log("App 컴포넌트 업데이트")); //custom hook 사용

  ...
  
  return (
    ...
  );
}

export default App;

 

Controller.jsx

import useUpdate from "../hooks/useUpdate";

export default function Controller({ onClickButton }) {
  useUpdate(() => {
    console.log("Controller 컴포넌트 업데이트");
  });

  return (
    ...
  );
}

 

실습 코드

React Hook · Yoonyesol/React-Next-Study@d0c0ac4

 

 

 

 

 

출처

https://kmooc.udemy.com/course/react-next-master/learn/lecture/39610746?start=30#overview