[additional] React `useEffect`에 대한 고찰

[ABizCho]

연관 챕터

{연관 issue 번호}

조사 내용

[leejaeseung]

예전에 useEffect 에 대해 찾아본 내용을 공유합니다.

useEffect 훅을 잘 사용하는 법

useEffect 훅을 사용할 때 주의할 점을 포스팅한 글입니다.

https://blog.logrocket.com/guide-to-react-useeffect-hook/

The key concepts of using effects

• effects 는 매 render 주기 이후에 실행되므로 컴포넌트가 언제 (재)렌더링 되는지 정확히 이해해야 한다.
• effects 는 항상 렌더 이후에 실행된다. 하지만 회피할 수도 있다.
• effects 를 회피하려면 값에 대한 기본 javascript 개념을 이해해야 한다. effect 의존성이 마지막 렌더 주기 이후 변경된 경우에만 effect 가 다시 실행된다.
• 컴포넌트가 불필요하게 리렌더링되지 않음을 보장해야 한다. 이는 불필요한 effects 의 재실행을 막아준다.
• 컴포넌트 내부의 함수는 매 렌더마다 새로 생성됨을 이해해야 한다. effect 내부에서 함수를 사용할 때 영향을 미친다. (컴포넌트 밖으로 빼거나, useCallback 을 사용하자.)
• javascript 의 오래된 클로져 개념을 이해해야 한다. 만료된 props 나 state 가 effect 내부에 존재할 수 있다. (effect 의 의존성 배열이나 useRef 를 활용하자.)
• 린트의 추천을 무시하지 말자. (useEffect 의 의존성 배열 추천 등.)
• 클래스 컴포넌트의 생명 주기를 모방하지 마라. 데이터의 흐름이나 effect 와 관련된 state 를 고려해라. state 의 변경에 따라 effect 가 발생하니..

너무 많은 훅은 코드를 망친다. - 훅이 나쁜 이유

https://leocode.com/development/why-hooks-are-bad/

Let’s imagine that hooks are connected with each other – The `useEffect` hook reacts on search field change, changes the debounced-state of the filter (hook) and that triggers the search fetch hook.
The downloaded data triggers the change state on two state hooks (data and loading state), which then trigger other hooks to operate, and everything can trigger rerenders at any point.
This is not such an uncommon situation, yet it’s unnecessarily hard to go through using only dependencies as reference for code logic.

훅들이 서로 연결되어 있는 경우를 생각해보자. - useEffect 훅은 검색 필드가 변경되면 반응해 필터 state 그룹을 변경시키고 검색 fetch 훅을 트리거한다.

다운로드받은 데이터는 두 개의 훅(data, loading state)을 트리거한다. 그리고 다른 훅을 트리거하고, 모든 것이 어디서든 리렌더링되게끔 트리거할 수 있다. (암튼 트리거가 꼬인다.)

이것은 드문 상황이 아니지만, 코드 로직에 대한 종속성만을 사용하는 것은 불필요하게 어렵습니다. (종속성을 작게 가져가면 꼬이지 않겠지만 그러기 힘들다..?)