대부분 hooks를 이용해 몇가지 컴포넌트를 만들고 커스텀 hook을 만들어서 많은 코드를 줄였습니다.
하지만 때로는 useEffect 조각들이 서로 잘 어울리지 않습니다. 그것은 클래스의 라이프 사이클과 비슷해 보이지만... 정말 그것 일까요?
[] 는 뭔가요?답을 보기 위해 우리는 한 걸음 물러서야 합니다. 이 글의 목표가 당신에게 만능 레시피를 주는 것이 아니다. 당신이 진정으로 useEffect에 공감하는 것입니다.
우리에게 친숙한 클래스의 라이프 사이클 메소드의 프리즘을 통해 hook을 보는 것을 멈추고 나서야 모든 것이 받아들여졌다.
이 글은 당신이 useEffect API에 어느정도 익숙하다고 가정합니다. 또한 매우 깁니다. 거의 작은 책과 같습니다. 하지만 서두르거나 신경 쓰지 않는 다면 TLDR을 작성했습니다.
deep dives에 익숙하지 경우 이 설명이 다른 곳에서 나타날 때 까지 기다리는 것이 좋습니다. React가 2013년에 나온 것처럼 사람들이 다른 정신 모델을 인a식하고 이해하기 까지는 어느정도 시간이 걸립니다.
전체 게시물을 읽으려는 경우 자유롭게 건너 뛰세요.
어떻게 ComponentDidMount를 useEffect로 복제합니까?
useEffect(fn, []) 로 가능합니다. 하지만 정확하게 일치하는 것은 아닙니다. 그것은 componentDidMount 와는 달리 state와 props를 캡쳐합니다. 따라서 콜백 내부에서 초기 state와 props를 볼 수 있습니다. "최신"의 무언가를 보고 싶다면, ref에 쓸 수 있습니다. 그러나 일반적으로 코드를 구조화 하여 간단하게 해결할 수 있습니다. effect에 대한 정신 모델은 componentDidMount 라이프 사이클과 다르다는 사실을 기억하고, 정확한 동등성을 찾으려고 하면 도움이 아닌 혼란을 겪을 수 있습니다. 생산성을 높이려면 "사고 방식" 을 생각해야 하며, 정신 모델은 라이프 사이클 이벤트에 응답하는 것보다 동기화 구현에 가깝습니다.
useEffect 에서 데이터를 올바르게 가져오는 방법은? [] 은 무엇?
https://www.robinwieruch.de/react-hooks-fetch-data/ 이 글을 참고 하길 바랍니다. 좋은 입문서입니다. [] 은 effect가 데이터 흐름에 참여하는 값을 사용하지 않으므로 한번만 적용합니다. 두번째 인자의 값을 잘못 생략하는 대신 몇가지 전략 (useCallback, useMemo) 을 배워야 합니다.