[React] Custom Hook, 실습 예제

Custom Hook

반복적인 로직을 Custom Hook으로 만들어 사용한다.
이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수이다.
단순한 함수이기 때문에 리액트 컴포넌트처럼 제약이 없다.
- 파라미터 등을 마음대로 받을 수 있다.

✔ 예시

위에 두 코드는 전부 동일하지만 마지막 return 부분만 다르다.
이러면 공통 로직을 Custom Hook으로 추출하여 진행할 수 있다.

공통 로직 추출

공통 로직 추출 후 각각 적용

해당 코드는 Custom Hook을 추출하기 전과 동일하게 작동한다.

✔ React Hook 끼리 데이터를 공유하는 방법

useState로 설정한 값을 Custom Hook에 인자값으로 넣어 현재 컴포넌트와 Custom Hook 과의 데이터를 공유한다.

✔ 실습 예제

// useCounter.jsx

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;

Custom Hook으로써 매개변수로 value를 받을 수 있다.
해당 value는 useState의 count에 값이 맵핑된다.
두가지 함수는 count 증가와 감소를 나타낸다.

// Accommodate.jsx

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

const MAX_CAPACITY = 10;

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

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

    useEffect(() => {
        setIsFull(count >= MAX_CAPACITY);
        console.log(`Current count value : ${count}`)
    }, [count])

    return (
        <div style={{ padding: 16 }}>
            <p>{`총 ${count}명 수용했습니다.`}</p>

            <button onClick={increaseCount} disabled={isFull}>
                입장
            </button>
            <button onClick={decreaseCount}>퇴장</button>

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

export default Accommodate;

각 버튼에 Custom Hook에서 만들어놓은 함수를 맵핑한다.
버튼이 클릭될 때 마다 Custom Hook에서 정의해놓은 count에 값이 변경된다.
count값이 계속 올라가서 MAX_CAPACITY에 정의해놓은 값에 다다르면 더 이상 증가 시킬 수 없다.

Reference

인프런 Inje Lee : 처음 만난 리액트(React)

BJSNuruhee / levelup

[React] Custom Hook, 실습 예제 #60

Custom Hook

✔ 예시

✔ React Hook 끼리 데이터를 공유하는 방법

✔ 실습 예제