React 학습하기
탈출구

Effect에서 이벤트 분리하기

이벤트 핸들러는 같은 상호작용을 반복하는 경우에만 재실행됩니다. Effect는 이벤트 핸들러와 달리 prop이나 state 변수 등 읽은 값이 마지막 렌더링 때와 다르면 다시 동기화합니다. 때로는 두 동작이 섞여서 어떤 값에는 반응해 재실행되지만, 다른 값에는 그러지 않는 Effect를 원할 때도 있습니다. 이 페이지에서 그 방법을 알려드리겠습니다.

학습 내용

  • 이벤트 핸들러와 Effect 중에 선택하는 방법
  • Effect는 반응형이고 이벤트 핸들러는 아닌 이유
  • Effect의 코드 일부가 반응형이 아니길 원한다면 해야 할 것
  • Effect 이벤트의 정의와 Effect에서 추출하는 방법
  • Effect 이벤트를 사용해 Effect에서 최근의 props와 state를 읽는 방법

이벤트 핸들러와 Effect 중에 선택하기

먼저 이벤트 핸들러와 Effect의 차이점에 대해 간단히 알아보겠습니다.

채팅방 컴포넌트를 구현한다고 상상해 보세요. 요구사항은 아래와 같습니다.

  1. 채팅방 컴포넌트는 선택된 채팅방에 자동으로 연결해야 합니다.
  2. ”전송” 버튼을 클릭하면 채팅에 메시지를 전송해야 합니다.

코드를 이미 구현했다고 하겠습니다. 그런데 그 코드를 어디에 넣어야 할지 확실하지 않습니다. 이벤트 핸들러와 Effect 중에 무엇을 사용해야 할까요? 이 질문에 답해야 할 때마다 해당 코드가 실행되어야 하는 이유를 고려해 보세요.

이벤트 핸들러는 특정 상호작용에 대한 응답으로 실행된다

사용자 관점에서 메시지는 “전송” 버튼이 클릭 되었기 때문에 전송되어야 합니다. 다른 때나 다른 이유로 메시지가 전송되면 사용자는 꽤 당황할 것입니다. 그러므로 메시지를 전송하는 건 이벤트 핸들러가 되어야 합니다. 이벤트 핸들러는 특정 상호작용을 처리하게 해줍니다.

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');