[REACT] Custom Hook

설문시스템 개발 프로젝트를 진행하면서 랜더링될때 useEffect가 실행되지 않고 특정 조건에만 실행되는 로직을 작성하고 싶었다

커스텀 훅?

코드를 작성하다보면 반복되는 로직이 발생한다.
커스텀 훅은 반복되는 로직을 하나로 묶어 재사용하기 위함에서 시작되었다.

사용예시 - useDidMountEffect

import React, { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
};

export default useDidMountEffect;

다음과 같이 코드를 작성하고 필요한 컴포넌트에서 import해서 사용 가능하다.

적용코드

useDidMountEffect(() => {
    dispatch({ type: 'ADDSURVEY', data: postData })
    console.log('useEffect 실행')

}, [postData]);

기대효과는 첫 랜더링때는 실행되지 않고, postData가 변화되었을때, dispatch함수를 실행하고 conole을 출력하기를 기대하였고 정상적으로 실행되었다.

이와 같이 자주 사용하는 로직이 있다면 Custom Hook을 생성하면 효율적인 코드 작성이 가능할 것이다.