🛑 React 수명 주기 방법에 대해 생각하지 마세요.

이 게시물에서는 수명 주기 메서드에서 ReactJs의 상태 동기화 및 후크로의 패러다임 전환에 대해 이야기하겠습니다.

Here is a video version of this post, if that's what you prefer.

클래스 구성 요소가 ReactJs에 있을 때(아직도 그렇지만 아무도 더 이상 좋아하지 않습니다) 우리는 마운트, 마운트 해제 및 수명 주기 방법 측면에서 많이 생각했습니다.



클래스 구성 요소가 마운트될 때마다 생성자 → 렌더링 → DOM 및 refs 업데이트 → componentDidMount 순서로 수명 주기 메서드가 호출됩니다.

그러나 React Hooks가 등장했고 우리는 종속성 배열 측면에서 생각하기 시작했습니다.

그리고 종종 우리는 다음과 같이 묻습니다.

What is the hooks equivalent to [some lifecycle method]?

빠른 대답은 후크가 "라이프사이클"관점에서 "상태 및 DOM과의 동기화"관점으로 생각하는 패러다임 전환이라는 것입니다.



이전 패러다임을 취하여 후크에 적용하려는 시도는 잘 작동하지 않으며 방해가 될 수 있습니다.

useEffect(fn) // fn invoked on all updates

useEffect(fn, []) // invoked on mount

useEffect(fn, [a, b, c]) // invoked if any of the members of the array are updated

위의 스니펫은 React 후크에 대해 생각하는 올바른 방법이 아닙니다.

라이프사이클은 사라졌지만 우리는 여전히 빈 dep 배열이 있는 useEffect를 componentDidMount로 생각하며 이는 React Hooks에 대해 생각하는 올바른 방식이 아닙니다.

이제 반응 후크에 대해 생각하는 올바른 방법을 제시하고자 합니다.

상태 동기화

보세요, 문제는 "이 효과가 언제 실행됩니까?"가 아니라 "이 효과가 동기화되는 상태"입니다.

useEffect(fn) // useEffect with no dep array, sync with all state

useEffect(fn, []) // useEffect with empty dep array, sync with no state

useEffect(fn, [stateA, stateB]) // useEffect with stateA and stateB in dep array sync with stateA and stateB.

이것이 바로 React Hooks에 대해 생각해야 하는 방식입니다.


이 영상이 도움이 되셨기를 바랍니다. 그렇다면 구독을 통해 지원을 보여주세요.

저는 또한 주간 뉴스레터를 운영하고 있으므로 여기에서도 저와 함께 할 수 있습니다: https://www.getrevue.co/profile/8020lessons

감사합니다!