29화: Removing Effect Dependencies

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

침엽수에 앉은 참새. Unsplash 에 River Fx 님이 올림

공식 문서

https://react.dev/learn/removing-effect-dependencies

Removing Effect Dependencies – React

의존성은 코드와 일치해야 한다

• 이펙트는 반응형(리액트스러운) 값에 반응함
• 의존성 배열에는 이펙트 코드 내부에서 쓰는 모든 반응형 값이 들어 있음
• 의존성을 없애고 싶다면 그게 반응형 값이 아니라는 걸 linter에게 증명해야 함
• 의존성을 바꾸고 싶으면 주변 코드를 바꿔야 함
  1. 이펙트의 코드나 반응형 값들의 선언 방식을 바꾸기
  2. linter를 따라서 코드의 변화에 맞게 의존성 배열 바꾸기
  3. 맘에 안 들면 다시 1단계부터 반복
• 절대 linter 설정을 끄는 방법으로 의존성 문제를 해결하지 않기

불필요한 의존성을 없애기 위한 질문들

• 의존성 배열의 값들 중 단 하나라도 바뀌면 이펙트를 실행하는 게 맞는지 의심하기
• 조건에 따라 다른 이펙트를 실행하고 싶을 수도 있음
• 값의 변화에 대응해서 뭔갈 하는 게 아니라 그냥 최신 값을 읽고만 싶을 수도 있음
• 의존성 값이 함수나 객체라 의도치 않게 자주 바뀔 수 있음

1. 이 코드는 이벤트 핸들러로 옮겨야 하나?
   • 애초에 이펙트가 맞는지 의심하기
   • 특정 상호작용에 반응하는 코드는 이벤트 핸들러
2. 이펙트가 관련 없는 여러 일들을 하나?
   • 하나의 이펙트는 하나의 역할(동기화)만
3. 다음 상태를 계산하기 위해 현재 상태가 필요한가?
   • 상태 변경 함수에 값을 넣지 말고 updater 함수를 넣기
4. 반응형 값의 변화에 반응하기를 원하지는 않지만 값 자체를 읽을 필요는 있는 경우
   • 실험적인 기능 useEffectEvent 사용하기
5. 혹시 반응형 값이 의도치 않게 변하는가?
   • 객체나 함수는 선언할 때마다 새로운 참조가 생김 -> 내용물은 같더라도 리액트는 다르다고 판단
   • 해당 객체나 함수가 props와 상태에 영향을 아예 받지 않는다면 컴포넌트 밖으로 분리하기: 반응형 값이 아니므로
   • 반응형 값을 써야 한다면 객체나 함수의 선언을 이펙트 로직 내부에 작성하기
   • 객체 내부에서 필요한 원시 자료형 값만을 따로 읽어서 사용하기
   • 함수를 이용해 원시 자료형을 추출해서 사용하기: 함수는 순수해야 한다는 거 까먹지 말기