20210902 TIL

ANIMAN 클론코딩

• 프로젝트 마무리, 장바구니 기능(추가, 삭제, 불러오기) 구현

실전 리액트 프로그래밍

[리액트 훅 기초 익히기2]

import React, { useState, useEffect } from 'react';

export default function Profile({ userId }) {
    const [user, setUser] = useState(null);
    const [value, setValue] = useState(0);
    // const value = userId + 10; // 지역 변수도 반드시 의존성 배열에 입력해줘야 함
    function func1() {
        console.log(userId);
    }
    useEffect(() => {
        func1(); // 지역 함수를 부수 효과 함수 내부에서 사용했다면 의존성 배열에 입력해줘야 함
        getUserApi(userId).then(data => setUser(data));
    }, [userId, value, func1]); // 의존성 배열... 이 배열에 있는 값이 변경될 때만 부수 효과 함수가 실행
                  // userId가 변경될 때만 부수 효과 함수가 실행
                  // 만약 빈 배열을 입력하면, 부수 효과 함수는 마운트된 이후에 한 번만 호출
                  // 컴포넌트의 상태값이나 속성값 또는 컴포넌트 내부에서 정의된 지역 변수나 지역 함수 같은
                  // 것들은 모두 의존성 배열에 작성해야 함
                  // 상태값 변경 함수는 의존성 배열에 입력하지 않아도 괜찮다

import React, { useState, useEffect } from 'react';

export default function WidthPrinter() {
    const [width, setWidth] = useState(window.innerWidth);
    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('useEffect 1');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('useEffect 2');
        }; // 부수 효과가 반환한 함수는 컴포넌트가 unmount 되기 전에 적어도 한 번 호출됨
    },[]); // []를 지우면 width가 변경될 때마다 컴포넌트가 렌더링, 그 때마다 부수 효과 함수 실행
           // 그리고 이전에 반환(return)된 함수가 실행되고 부수 효과 함수가 실행되는 것을 반복 
    return <div>{`width is ${width}`}</div>;
}

[훅 직접 만들기]

• 리액트가 제공하는 훅을 이용해서 커스텀 훅을 만들 수 있다
• 커스텀 훅을 이용해서 또 다른 커스텀 훅을 만들 수 있다.
• 훅을 직접 만들어서 사용하면 쉽게 로직을 재사용할 수 있다.
• 커스텀 훅의 이름은 use로 시작하는 게 좋다.(코드 가독성 좋아짐, 여러 리액트 개발 도구의 도움을 쉽게 받을 수 있음)
• 마운트 여부를 알려주는 커스텀 훅(useMounted) - 서버 사이드 렌더링할 때 쓰임

import { useState, useEffect } from 'react';

export default function useMounted() {
    const [mounted, setMounted] = useState(false);
    useEffect(() => {
        setMounted(true);
    }, []);
    return mounted;
}

유용할 만한 커스텀 훅

• 로그인된 사용자만 보여줄 수 있는 기능을 하는 훅(useBlockIfNotLogin())
• 저장하지 않고 페이지를 나가려고 할 때 alert을 띄워주는 훅(useBlockUnsavedChange(desc))
• useEffect를 로그인 유저일 때만 실행하고 싶을 때(useEffectIfLoginUser(callback,deps))
• 로컬스토리지를 사용할 때(useLocalStorage(key,initalValue) ⇒ [value, setValue]
• 쿠키

[훅 사용 시 지켜야 할 규칙]

규칙 1: 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.

규칙 2: 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다.

(if 문이나 for 문에서 사용하면 안된다.)
(함수 안에서 훅을 호출해도 안된다.)