[React] Hooks(2) - Custom Hook

J.·2024년 5월 16일

React

목록 보기

5/11

🔍 한눈에 알아보기

Custom Hook이란?

이름은 무조건 use로 시작
내부에서 다른 hook을 호출
일반적인 함수와 동일하게 작동한다고 생각해도 무방
- 어떤 값을 반환하고 어떤 값을 인자로 받아도 상관 없음
같은 custom hook을 사용하는 컴포넌트가 같은 state와 effect를 사용하는 것은 아님
코드의 재사용성과 가독성을 높여줌

Custom Hook

React에서는 사용자가 만들어서 사용할 수 있는 함수인 custom hook을 만들 수 있다.

Custom hook은 state나 로직 등을 재사용하게 해준다.

앞에 use를 앞에 붙여 만들 수 있다.

만약 여러개의 component에서 같은 로직을 반복하고 있다면 custom hook을 만들어 사용하면 좋다.

아래 예제 코드를 살펴 보면서 이해해보자.

import { useState } from 'react';

function useCounter(initialCount = 0) {
    const [count, setCount] = useState(initialCount);

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(Math.max(count - 1, 0));

    return [count, increment, decrement];
}

export default useCounter;

위 코드를 보면 useCounter라는 custom hook을 만들어 인자로 initialCount라는 값을 받아 초기화시킬 수 있게 만들었고,

count, increment, decrement는 반환하면서 다른 component에서 사용할 수 있게 하였다.

이 custom hook을 다른 component에서 어떻게 사용하는지 살펴보자.

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

const MAX_CAPACITY = 10;

function Accomodate(props){
    const [isFull, setIsFull] = useState(false);
    const [count, increment, decrement] = useCounter(0);

    useEffect(() => {
        console.log("===========");
        console.log("useEffect() 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={increment} disabled={isFull}>입장</button>
            <button onClick={decrement}>퇴장</button>
            {isFull && <p style={{color: "red"}}>정원이 가득 찼습니다.</p>}
        </div>
    )
}

export default Accomodate;