React > 유용한 커스텀 훅

1. useConsolelog

import { useEffect } from 'react';

// 커스텀 훅 정의
function useConsoleLog(label, value) {
    useEffect(() => {
        console.log(`${label} : `, value);
    }, [label, value]);
}

export default useConsoleLog;

---

2. useCommonCodeList

import { useState, useEffect } from 'react';
import { getCommonCodeListInfo, tokenGetCommonCodeListInfo } from '../api/adminApi';
import fetchData from '../utils/fetchData';
import useAxiosWithAuth from 'hooks/useAxiosWithAuth';

// 공통 코드 리스트를 불러와 라디오, 셀렉트 옵션으로 변환하는 커스텀 훅
const useCommonCodeList = (groupCode) => {
    const axiosInstance = useAxiosWithAuth();
    const loginUser = '100';

    const [commonCodeListData, setCommonCodeListData] = useState([]);

    // 공통코드 리스트를 불러오는 함수
    const fetchCommonCodeList = async () => {
        const postData = { searchComGroupCd: groupCode };
        //await fetchData(getCommonCodeListInfo, setCommonCodeListData, postData);
        try {
            const data = await tokenGetCommonCodeListInfo(axiosInstance, postData);
            setCommonCodeListData(data);
        } catch (error) {
            console.error('Error fetching data: ', error);
        }
    };

    useEffect(() => {
        fetchCommonCodeList();
    }, []);

    // 공통 코드 리스트 데이터
    const commonCodeResultData = commonCodeListData?.resultData?.cmmnCdList;

    ////////////////////////////////////////

    // 라디오 옵션 변환
    const commonCodeRadioOptionFn = () => {
        const options = commonCodeResultData?.map(code => ({
            value: code.comCd,
            title: code.cdNm
        }));
        let commonCodeRadioOption = options;
        return commonCodeRadioOption;
    };

    ////////////////////////////////////////

    // 셀렉트 옵션 변환
    const commonCodeSelectOptionFn = () => {
        const options = commonCodeResultData?.map(code => ({
            id: code.comCd,
            name: code.cdNm
        }));
        let commonCodeSelectOption = options;
        return commonCodeSelectOption;
    };

    return {
        commonCodeResultData,
        commonCodeRadioOptionFn,
        commonCodeSelectOptionFn
    };
};

export default useCommonCodeList;

---

3. useNavigateWithQuery

import { useMemo } from 'react';

const useNavigateWithQuery = (path, queryParams) => {
    // useMemo를 사용하여 쿼리 스트링이 변경될 때만 새로운 URL을 계산합니다.
    const finalUrl = useMemo(() => {
        const newQueryString = Object.entries(queryParams)
            .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
            .join('&');

        return `${path}?${newQueryString}`;
    }, [path, queryParams]);

    return finalUrl;
};

export default useNavigateWithQuery;

---

4. JsonDataShowTemp

import React from 'react';

const JsonDataShowTemp = ({ data }) => {
    return (
        <pre>{JSON.stringify(data, null, 2)}</pre>
    );
};

export default JsonDataShowTemp;

---

5. stringifyJSON

// 응답 확인용 메서드
export const stringifyJSON = (obj, indent = 2) => {
    return JSON.stringify(obj, null, indent);
}