Chapter 4. Escape Hatches

#7 Effect 의존성 제거하기

학습 목차

1. 의존성은 코드와 일치해야 한다.
2. 불필요한 의존성 제거하기

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

• Effect를 작성할 때는 먼저 Effect가 수행하기를 원하는 작업을 시작하고 중지하는 방법을 지정한다.
• 그런 다음 Effect 의존성을 비워두면([]) 린터가 올바른 의존성을 제안한다.
• Effect는 반응형 값에 “반응”한다.

1-1. 의존성을 제거하려면 의존성이 아님을 증명하라.

• Effect의 의존성을 “선택”할 수 없다는 점에 유의하라.
  Effect의 코드에서 사용되는 모든 반응형 값은 의존성 목록에 선언되어야 합니다. 의존성 목록은 주변 코드에 의해 결정된다.
• 반응형 값에는 props와 컴포넌트 내부에서 직접 선언된 모든 변수 및 함수가 포함된다.

1-2. 의존성을 변경하려면 코드를 변경하라.

1. 먼저 Effect의 코드 또는 반응형 값 선언 방식을 변경한다.
2. 그런 다음, 변경한 코드에 맞게 의존성을 조정한다.
3. 의존성 목록이 마음에 들지 않으면 첫 번째 단계로 돌아가서 코드를 다시 변경한다.
   (그리고 코드를 다시 변경하자.)

• 의존성을 변경하려면 먼저 주변 코드를 변경하라.
  의존성 목록은 Effect의 코드에서 사용하는 모든 반응형 값의 목록이라고 생각하면 된다.
  이 목록에 무엇을 넣을지는 사용자가 선택하지 않는다.
  이 목록은 코드를 설명한다. 의존성 목록을 변경하려면 코드를 변경하자.
• 이것은 방정식을 푸는 것처럼 느껴질 수 있다.
  예를 들어, 의존성 제거와 같은 목표를 설정하고 그 목표에 맞는 코드를 “찾아야” 한다.
  모든 사람이 방정식을 푸는 것을 재미있어하는 것은 아니며, Effect를 작성할 때도 마찬가지이다.

! 주의 !

• 기존 코드베이스가 있는 경우 이와 같이 린터를 억제하는 Effect가 있을 수 있다.

  useEffect(() => {
    // ...
    // 🔴 Avoid suppressing the linter like this:
    // eslint-ignore-next-line react-hooks/exhaustive-deps
  }, []);

• 의존성이 코드와 일치하지 않으면 버그가 발생할 위험이 매우 높다.
  린터를 억제하면 Effect가 의존하는 값에 대해 React에 “거짓말”을 하게 된다.

2. 불필요한 의존성 제거하기

• 코드를 반영하기 위해 Effect의 의존성을 조정할 때마다 의존성 목록을 살펴보라.
  이러한 의존성 중 하나라도 변경되면 Effect가 다시 실행되는 것이 합리적일까?
  가끔 대답은 “아니오”이다.
  다른 조건에서 Effect의 다른 부분을 다시 실행하고 싶을 수도 있다.
  일부 의존성의 변경에 “반응”하지 않고 “최신 값”만 읽고 싶을 수도 있다.
  의존성은 객체나 함수이기 때문에 의도치 않게 너무 자주 변경될 수 있다.

2-1. 이 코드를 이벤트 핸들러로 옮겨야 하는가?
2-2. Effect가 여러 관련 없는 일을 하고 있는가?
2-3. 다음 state를 계산하기 위해 어떤 state를 읽고 있는가?
2-4. 값의 변경에 ‘반응’하지 않고 값을 읽고 싶은가?
2-5. 일부 반응형 값이 의도치 않게 변경되는가?

• 위의 2-* 내용들은 아직 안정된 버전의 React로 출시되지 않은 실험적인 API에 대해 설명하는 내용을 포함하고 있어 참고만 하였음.

요약

• 의존성은 항상 코드와 일치해야한다.
• 의존성이 마음에 들지 않으면 코드를 수정해야한다.
• 린터를 억제하면 매우 혼란스러운 버그가 발생하므로 항상 피해야한다.
• 의존성을 제거하려면 해당 의존성이 필요하지 않다는 것을 린터에게 “증명”해야한다.
• 특정 상호작용에 대한 응답으로 일부 코드가 실행되어야 하는 경우 해당 코드를 이벤트 핸들러로 이동하자.
• Effect의 다른 부분이 다른 이유로 다시 실행되어야 하는 경우 여러 개의 Effect로 분할하라.
• 이전 state를 기반으로 일부 state를 업데이트하려면 업데이터 함수를 전달하라.
• “반응”하지 않고 최신 값을 읽으려면 Effect에서 Effect Event를 추출하자.
• JavaScript에서 객체와 함수는 서로 다른 시간에 생성된 경우 서로 다른 것으로 간주된다.
• 객체와 함수의 의존성을 피하라. 컴포넌트 외부나 Effect 내부로 이동하자.

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/

Wikipedia

https://ko.wikipedia.org/wiki/