2024-07-26 커스텀 훅으로 컴포넌트와 state 반환해서 부모 컴포넌트에서 사용하기

퍼널 패턴과 같이 여러 컴포넌트와 페이지가 쏟아지는 경우, 그 컴포넌트들을 호출한 부모 컴포넌트에서는 하위 컴포넌트에서 생성된 state를 공유받을 수가 없다.

이번 프로젝트를 진행하면서 재사용 가능한 컴포넌트는 중복 작업을 피하고 하나로만 만들어 프로젝트의 사이즈를 줄이고, 팀의 공수를 줄이는 데에 초점을 두고 진행하고 있다.

그동안 팀프로젝트를 많이 진행했지만, 그동안 진행했던 것은 팀프로젝트가 아니라 개인 프로젝트 5개를 하나의 리포지토리에 모아 놓은 형태가 아니었나 하는 자조적인 반성도 해본다. 이러한 패턴이 익숙하지 않아 초반 작업 속도가 꽤 걸린다.

그 중에서 아주 간단한 버튼을 커스텀 훅으로 만들어서 팀원들에게 사용법을 안내한 문서를 오늘의 TIL로 남겨 본다.

이미지

파일 위치

src/hooks/useSelectBuddyCounts.tsx

코드 살펴보기

'use client';

import { useState } from 'react';

export default function useSelectBuddyCounts() {
    const [buddyCounts, setBuddyCounts] = useState(1);

    const handleAddBuddyCounts = () => {
        setBuddyCounts(buddyCounts + 1);
    };

    const handleSubBuddyCounts = () => {
        setBuddyCounts(buddyCounts - 1);
    };

    const SelectBuddyCounts = () => {
        return (
            <div className="flex flex-row gap-[2px]">
                <button
                    className="text-[#647484] w-[30px] h-[30px] xl:w-[50px] xl:h-[50px] bg-[#edeff1] hover:bg-gray-400 flex items-center justify-center"
                    onClick={handleSubBuddyCounts}
                    disabled={buddyCounts === 1}
                >
                    -
                </button>

                <input
                    type="hidden"
                    className="md:p-2 p-1 text-xs md:text-base focus:outline-none text-center h-[24px]"
                    readOnly
                    name="custom-input-number"
                />
                <div className="bg-main-color w-[30px] h-[30px] xl:w-[50px] xl:h-[50px] text-white md:text-base flex items-center justify-center cursor-default">
                    <span>{buddyCounts}</span>
                </div>

                <button
                    className="text-[#647484] w-[30px] h-[30px] xl:w-[50px] xl:h-[50px] bg-[#edeff1] hover:bg-gray-400 flex items-center justify-center"
                    onClick={handleAddBuddyCounts}
                    disabled={buddyCounts === 4}
                >
                    +
                </button>
            </div>
        );
    };

    return {
        buddyCounts,
        handleAddBuddyCounts,
        handleSubBuddyCounts,
        SelectBuddyCounts,
    };
}

주요 로직

• 기본 값은 1명입니다.
  • buddyCounts의 initialState === 1
  • buddyCounts === 1이면 - 버튼이 disabled 됩니다.
• 본인 포함 4명까지가 최대치입니다.
  • buddyCounts가 4가 되면 + 버튼이 disabled 됩니다.
• add, sub 함수 / SelectBuddyCounts(버튼 컴포넌트) / buddyCounts(state)를 반환합니다.

사용법

커스텀 훅 import

import useSelectBuddyCounts from '@/hooks/useSelectBuddyCounts';

커스텀 훅 호출

const { buddyCounts, SelectBuddyCounts } = useSelectBuddyCounts();

위 코드는 buddyCounts(state)와 SelectBuddyCounts(버튼 컴포넌트)를 구조 분해 할당하여 호출합니다. 이 두개만 사용해도 될 것 같습니다.

필요한 곳에서 컴포넌트 호출

            <div className="flex flex-col items-center text-gray-600 text-sm xl:text-lg mb-5 xl:mb-10">
                <p>최대 여정 인원은 4명까지 선택 가능해요.</p>
            </div>
            <SelectBuddyCounts />

검색 페이지의 경우에는 buddyCounts는 부모 페이지에서 사용하셔도 되고, 글쓰기 페이지에서는 마지막 페이지인 CompleteWrite 컴포넌트로 props를 내려주면 될 것 같습니다.

응용 모습

위 코드대로 작성하면 이렇게 됩니다.