Effect와 동기화하기

• 일부 컴포넌트는 외부 시스템과 동기화 해야 한다.
• ex) state를 기반으로 React가 아닌 컴포넌트를 제어하거나 서버 연결을 설정하거나 컴포넌트가 화면에 나타날 때, 분석 로그를 보낼 수 있다.

  • 여기서 Effect를 사용하면 렌더링 이후 일부 코드를 실행할 수 있다

    ⇒ 컴포넌트를 React 외부의 시스템과 동기화 할 수 있다

Effect는 무엇이고 이벤트랑 어떻게 다른가?

✅ (사전 준비) React 컴포넌트 내부 유형

1. 렌더링 코드
   • 컴포넌트의 최상위 레벨에 존재
   • props와 state를 가져와 변환하고 화면에 표시할 JSX를 반환
   • 순수해야 함 (입력이 같으면 결과도 이전과 동일해야 함)
2. 이벤트 핸들러
   • 컴포넌트 내부에 있는 중첩된 함수
   • 계산만이 아닌 별도의 작업도 수행
     • ex) 입력 필드 업데이트, POST 요청, 화면 이동 등
   • 특정 사용자 작업으로 인해 발생하는 사이드 이펙트(state를 변경)가 포함되어 있다

But, 위 두 가지 유형만으로는 부족한 상황이 있다.

• ex) 화면에 표시될 때마다 채팅 서버에 연결해야 하는 ChatRoom 컴포넌트

  • 서버에 연결하는 것은 순수한 계산이 아니라서(사이드 이펙트) 렌더링 중에 발생할 수 없다.
  • But, ChatRoom 표시를 촉발하는 클릭과 같은 특정 단일 이벤트는 없다

  💡 이럴때를 위해 Effect가 나옴!

Effect를 사용하면

• 특정 이벤트가 아닌 렌더링 자체로 인해 발생하는 사이드 이펙트를 명시할 수 있다.

  • 채팅에서 메시지를 보내는 것은 사용자가 특정 버튼을 클릭함으로써 직접적으로 발생하기 때문에 이벤트지만
  • 서버 연결을 설정하는 것은 컴포넌트를 표시하게 만든 상호작용에 관계없이 발생해야 하기 때문에 하나의 Effect이다.

• Effect는 화면 업데이트 후 커밋(DOM에 변경사항 반영)이 끝날 때 실행된다.

  • 이 때가 React 컴포넌트를 일부 외부 시스템(네트워크 또는 서드파티 라이브러리와 같은)과 동기화하기에 적절한 타이밍이다.

• Note

Effect가 필요하지 않을 수 있다

• 급하게 Effect를 추가하지는 말자
  • 주로, React 코드에서 벗어나 일부 외부 시스템과의 동기화에서 사용하고자 한 게 주 목적이다
  • 브라우저 API나 네트워크 등이 포함된다
• 다른 state를 기반으로 일부 state만 조정하려는데 Effect가 꼭 필요하진 않다