React Custom hook 이용하여 인원 수 체크 하기

1. React Custom hook...?

리액트는 반복되는 로직에 피로감을 느끼는 개발자들을 위해 hook 을 커스텀해서 이용하는 아주 편리한 기능을 제공한다.

Custom Hook 을 만드는 방법은 아주 간단하다. 

그냥 함수 앞에 use 를 붙여주면 난 이 친구를 hook 으로 사용할거야! 라는 뜻이며

hook 을 사용할 때 유의해야 할 점과 그 특성을 공유한다. 

 

하나의 컴포넌트에서 hook 이 실행되는 순서는 항상 같아야 한다.
그러므로 최상위 레벨 (at the Top Level) 에서 실행되어야 한다.

▪︎ if 블럭 안에서 쓸지 말 것
 - 조건에 따라 실행이 안 될수도 있어서

▪︎ for loop 블럭 안에서 쓰지 말 것
 - 실행 횟수가 달라지고 실행이 안될수도 있어서

▪︎ Function 안에서 쓰지 말 것
 - 함수의 실행에 의존성을 가지면 안된다.

 

2. useCounter 

import React, {useState} from "react";

function useCounter (initialValue) {
    const [count, setCount] = useState(initialValue);
    const increaseCount = () => setCount((count) => count +1);
    const decreaseCount = () => setCount((count) => Math.max(count -1, 0));

    return [count, increaseCount, decreaseCount];
}

export default useCounter;

3. 실제 실행될 Accommdate.jsx 컴포넌트 작성

import React, {useState, useEffect} from "react";
import useCounter from "./useCounter";

const MAX_CAPACITY = 10;

function Accommodate (props) {
    const [isFull, setIsFull] = useState(false);
    const [isEmpty, setIsEmpty] = useState(true);
    const [count, increaseCount, decreaseCount] = useCounter(0);

    useEffect(() => {
        console.log("========================");
        console.log("useEffect is called");
        console.log(`isFull : ${isFull}`);
    });

    useEffect(() => {
        setIsFull(count >= MAX_CAPACITY);
        setIsEmpty(count === 0);
        console.log(`현재 카운트 값은 : ${count}`);
    }, [count]);

    return (
        <div>
            <p>{`총 ${count} 명이 입장하였습니다.`}</p>
            <button onClick={increaseCount} disabled={isFull}>입장</button>
            <button onClick={decreaseCount} disabled={isEmpty}>퇴장</button>

            {isFull && <p style={{color : "red"}}>정원이 가득찼습니다.</p>}
            {isEmpty && <p style={{color : "green"}}>입장 인원이 없습니다.</p>}
        </div>
    )
}

export default Accommodate;

 

 

이때 setIsFull 함수와 setIsEmpty 함수를 실행시키는 hook 에 의존변수를 주지 않으면 아래와 같은 문제가 생긴다...;;;

1. 첫 번째 렌더에서 React는 count 값을 확인한다. 여기서 count가 0 이므로 프로그램은 useEffect 함수를 실행한다.
2. 그러고 나서 useEffect는 setCount 메소드를 호출하고 count Hook의 값을 업데이트한다.
3. 그런 다음 React는 UI를 다시 렌더링하여 업데이트된 count 값을 표시한다.
4. UI가 재렌더링 되었기 때문에, useEffect는 모든 렌더 사이클에서 실행되므로 또 다시 setCount 함수를 호출한다. 반복 앤 반복…
5. 위의 단계는 모든 렌더에서 발생하므로 앱이 충돌하게 된다.

4. 결과...!!