Only update and mount in useEffect of React Hooks

React Hooks에서 라이프 사이클은 useEffect 함수를 통해서 관리 된다. 기본 사용 방법은 공식 문서에 잘 나와 있다.

Mount

// componentDidMount
useEffect(() => {},[])

componentDidMount 는 의존성 상태 값이 없는 상태에서 컴포넌트가 렌더링 될때 최초 한번만 실행 된다.

Update

// componentDidUpdate
useEffect(() => {},[dependencies])

componentDidUpdate 는 의존성 상태 값을 가지고 컴포넌트가 렌더링 될때 최초에 한번 실행하고 의존성 값이 변경 될때마다 재 실행 된다.

복잡한 컴포넌트 구조에서 비동기 방식으로 useState값이 관리 될때 위와 같은 방식으로만 라이프 사이클을 관리하기 어려운 경우가 있다.

물론, 공식 문서에서 안내되는 방식으로 해결되지 않는 것은 구조적으로 문제가 있을 수 있고 리팩토링이 필요할 수도 있다.

하지만 의도적으로 아래와 같은 두가지 경우에 대해서 임시로 대응 할수 있는 방법을 알아보자.

• Only Mount : 비동기 의존성을 값을 가진 useEffect 가 의존성 값이 변경되고 최초 한번만 실행
• Only Update : 의존성을 값을 가진 useEffect 가 의존성 값이 Mount 이후 변경 될 때만 실행

Only Mount

const useEffectWithOnlyMount = (callback, dependencies) => {
  const didMount = useRef(false)
useEffect(() => {
    if (!didMount.current && dependencies) {
      callback()
      didMount.current = true
    }
  }, [dependencies])
}
export default useEffectWithOnlyMount

하나의 의존성 값을 가지며 최초 한번만 실행 된다.

const [state, setState] = useState()
useEffectWithOnlyMount(() => {
  callback()
}, state)

Only Update

const useEffectWithOnlyUpdate = (callback, dependencies) => {
  const didMount = useRef(true)
useEffect(() => {
    if (didMount.current) {
      didMount.current = false
    } else {
      callback()
    }
  }, [...dependencies])
}
export default useEffectWithOnlyUpdate

하나 이상의 의존성 값을 가지며 값이 변경될 때만 실행 된다.

const [stateA, setStateA] = useState()
const [stateB, setStateB] = useState()
useEffectWithOnlyUpdate(() => {
  callback()
}, [stateA, stateB])

참고 사항으로 현 시점에서는 실험단계 이지만 비동기로 데이터를 가져온 후 렌더링이 필요한 경우 Suspense 를 사용 할수 있도록 지원 예정이다.