useEffect 관리하는 방법?

Question

안녕하세요. react를 접한지 얼마 안 된 신입 개발자인데요.
기존 코드를 보고있는데 한 컴포넌트에 useEffect가 10 몇개씩 사용되고있는데, 이런식으로 사용하는게 맞는지 궁금합니다.

선언된 state를 보다가 state의 setter를 따라서 useEffect를 들어가다보면 어느샌가 코드 파일을 위 아래로 스크롤만 하고있고 코드가 뭐하는지 이해하기가 좀 어렵더라구요.

혹시 이렇게 비대한 컴포넌트를 이해하기 쉽게 effect를 관리하는 방법이 있나요?
또는 참고자료가 있다면 알려주세요. 감사합니다!

김하림 · Accepted Answer

코드를 보지 못해서 정확한 답변은 드리기 어렵지만 한 컴포넌트에 useEffect가 10개가 넘는게 일반적인 경우는 아닙니다. React.js 공식 문서의 조언에 의하면 useEffect는 마지막 수단으로 사용되어야 합니다. (https://beta.reactjs.org/learn/keeping-components-pure#where-you-_can_-cause-side-effects)

useEffect를 제거할 때 고려해볼 수 있는 케이스는 아래와 같습니다.

1. API 요청을 통해 데이터를 불러오는 경우
데이터 요청 로직을 useEffect에서 할 수도 있지만, React Query같은 서버 상태 관리 도구를 쓰면 useEffect를 제거하고 간결한 코드를 유지할 수 있습니다.

2. 상태에 따른 부수효과를 처리하는 경우
이벤트 핸들러(onClick, onSubmit 등)에서 처리할 수 있는 로직을 useEffect로 처리하는 경우 이벤트 핸들러로 로직을 옮기는 것을 고려해볼 수 있습니다.
이벤트 핸들러에서 처리할 수 없는 로직인 경우 상태 설계를 잘못했는지 고려해봐야 합니다.

신입 개발자시라면 잘 이해가 안되실수도 있습니다. 아래 글들을 읽으면서 useEffect에 대한 개념을 먼저 정립해보시는걸 추천드립니다.

useEffect 완벽 가이드 - https://overreacted.io/ko/a-complete-guide-to-useeffect/
useEffect가 나를 열받게 했다 - https://iborymagic.tistory.com/140

손정현 · Answer

안녕하세요!

저도 김하림님과 마찬가지로 useEffect가 꼭 필요한건지 파악을 먼저 해볼 것 같습니다.
(참고: https://beta.reactjs.org/learn/you-might-not-need-an-effect)

유저와 상호작용하는 대부분의 경우는 위 답변의 내용처럼 이벤트 핸들러에서 처리하도록 하는게 제일 깔끔한 것 같습니다.

useEffect가 꼭 필요한 경우인데 10 몇개씩 한 컴포넌트에 들어가있다면, 커스텀 훅을 만들어서 관리하는 것도 하나의 방법입니다
(참고: https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks)