이벤트 리스너 및 React Hooks

문제: React 후크 및 이벤트 리스너를 사용할 때 상태 콘솔 로그에 잘못된 정보가 표시됩니다.

문제 설명

제공된 CodeSandbox(https://codesandbox.io/s/lrxw1wr97m)를 고려하세요. "카드 추가" 버튼을 두 번 클릭한 다음 첫 번째 카드에서 "Button1"을 클릭하면 콘솔에 두 개의 카드가 있는 상태가 올바르게 표시됩니다. 그러나 동일한 카드(이벤트 리스너에 의해 처리됨)에서 "Button2"를 클릭하면 콘솔은 해당 상태의 카드 하나만 잘못 표시합니다.

잘못된 상태에 대한 이유

문제는 CardsProvider 및 Card 구성 요소의 이벤트 핸들러 처리 방식이 다르기 때문에 발생합니다. CardsProvider 기능 구성 요소인 handlerCardClick 및 handlerButtonClick 내에 정의된 이벤트 핸들러는 구성 요소가 렌더링될 때마다 다시 정의됩니다. 즉, 정의된 순간의 상태를 참조하며 이벤트 리스너가 트리거되면 오래될 수 있습니다.

반면에 카드 구성요소는 useRef를 사용하여 지속되는 이벤트 리스너를 등록합니다. 구성요소의 수명주기 전반에 걸쳐. 결과적으로 이벤트 리스너 함수는 구성 요소가 마운트된 당시의 상태를 참조하며 이는 오래된 상태입니다.

해결책 - 상태 업데이트 기능 사용

한 가지 해결책은 상태 업데이트를 사용하는 것입니다. 바깥쪽 범위의 오래된 상태에 의존하지 않고 새로운 상태를 인수로 받는 함수:

const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState   1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);

이 시나리오에서는 이벤트 리스너가 새로운 상태를 수신하여 오래된 데이터 문제를 제거합니다. 그러나 상태 업데이트 기능은 불필요한 업데이트를 방지하기 위해 동일한 상태를 반환할 수 있다는 점에 유의하는 것이 중요합니다. 상태 업데이트 기능 내에서 console.log를 사용하여 상태 변경을 관찰하세요.

기타 솔루션

이 문제를 해결하는 다른 방법은 다음과 같습니다:

• 변경 가능 상태: useState 대신 useRef 사용.
• 수동 이벤트 리스너 재등록: 상태가 변경될 때마다 이벤트 리스너를 다시 등록합니다.
• 내장 이벤트 처리: 사용자 정의 이벤트 리스너 대신 React의 내장 이벤트 처리를 사용합니다.