react native useFoucsEffect

autoT·2023년 10월 26일

useFocuseEffect

useEffect + backHandler를 이용해 뒤로가기를 컨트롤 해보려했는데 잘안돼서 사용하게됏다.

useEffect? useFocusEffect?

useEffect의경우 []을 쓸경우 리렌더링 될때마다 실행하게된다 뭐 [] 값이 들어가면 그 값의 변화에 따라 실행된다.
useFocuseEffect 같은경우 page에 도달할경우에만 실행한다는점이다. 그렇다, 리렌더링이 아니라 focus 되는 순간 호출이된다.

예를들어 mypage에 이와같은 코드가 있다고했을때

  useFocusEffect(
    React.useCallback(() => {
      // 화면에 진입할 때 실행할 코드

      dispatch(menuToggle(false))
      // return () => {
      //   console.log('안떨어졋어')

      return () => {
        // 화면을 떠날 때 실행할 코드
      }
    }, [])
  )

다른 페이지로 넘어가서 뒤로가기로 다시도착했을때 코드가 실행된다.

설명하기론 데이터페칭때 쓰면좋다고는 한다.

출처: https://velog.io/@chltjdrhd777/RN-useFocusEffect%EC%9D%98-%ED%96%89%EB%8F%99%EC%96%91%EC%8B%9D

https://reactnavigation.org/docs/use-focus-effect/

0개의 댓글