화면 전환이 되었을 때 상태 reset 시키기

이전에 리액트 네이티브에서 코드를 짜더라도 웹뷰만을 이용해서, 리액트 네이티브 네비게이션의 라이프 사이클에 대해서 제대로 이해를 못하고 있었다.

useState를 사용할 때 차이

리액트 네이티브 네비게이션 같은 경우에는, 실제로 페이지를 전환하는 것이 아닌 여러 페이지가 동시에 떠있는 상태이기 때문에 실제로 라우터의 주소가 변하고 다시 돌아오더라도 상태가 돌아오지 않는다.

출처 : https://velog.io/@skyu_dev/React-Navigation-Bottom-Tab%EC%9D%98-Require-cycle-warning-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

 

useFocusEffect

위의 이미지 출처에는 다음과 같은 코드가 있다.

  useFocusEffect(
    useCallback(() => {
      setState(defaultValue);
    }, [])
  );

 

다만, 일일이 useFocusEffect를 사용하기 보다는 커스텀 훅을 만드는 것이 좋다고 생각했다.

 

useCleanState

어떤 훅 이름을 사용할까 고민하다가, state라는 단어가 들어가는 것이 좋고 리셋되는 내용을 clean으로 사용하는 것이 좋다고 생각했다.(useResetableState나 useResetState는 오해의 여지가 있다고 생각해서..) 

import {useFocusEffect} from '@react-navigation/native';
import {useCallback, useState} from 'react';

export const useCleanState = <S,>(
  defaultValue: S,
): [S, React.Dispatch<React.SetStateAction<S>>] => {
  const [state, setState] = useState<S>(defaultValue);
  useFocusEffect(
    useCallback(() => {
      setState(defaultValue);
    }, []),
  );
  return [state, setState];
};