Effect란 무엇인가?

사전에 알아야 할 2가지 개념

1. 렌더링 함수는 순수하다.

• 컴포넌트 최상위 레벨에 있음
• props와 state를 가져와 변환하고 화면에 표시할 JSX 반환
• 수학 공식처럼 (인풋에 따른) 결과(아웃풋)만 계산할 뿐 다른 작업은 수행해선 안 됨

2. 이벤트 핸들러는 side effect를 동반한다.

• 컴포넌트 함수 내부에 중첩된 함수
• 계산만 하는 게 아니라 별도의 작업도 수행

  예: 라우터 이동, 서버와의 통신, input 업데이트

• 특정 사용자 작업(클릭, 입력 등)으로 발생하는 side effect를 필연적으로 포함
• 수행되는 시점: 렌더링 이후의 언젠가 (렌더링 이후이긴 하지만 사용자 상호작용이 있지 않는 한 발생 x)

이벤트 핸들러와 구분되는 'Effect' 개념이 필요한 이유

예

• 화면에 렌더링될 때마다 chatting 서버에 연결되어야 하는 ChatRoom 컴포넌트
  • 서버에 연결하는 건 순수한 계산이 아님
  • 또한 클릭과 같은 사용자 상호작용을 동반하지 않음
  • 수행 시점: 컴포넌트 렌더링 이후 무조건 발생 (사용자 상호작용 발생 시점과 무관)

요약
특정 사용자 이벤트가 아니라 렌더링 자체로 발생하는 side effect에 대해 명시할 때 Effect 개념을 사용한다.

• 서버 연결 동작은 화면 렌더링과는 관계가 없어서 하나의 side effect가 맞음
• 그러나 발생(수행)되어야 하는 시점이 사용자의 클릭이나 입력과 같은 상호작용과 무관하게 발생해야 한다면 이는 이벤트 핸들러가 아닌 Effect 개념에서 관리하는 게 맞다.

Effect가 수행되는 시점

• 화면 업데이트(리렌더링) 후 커밋(commit) 단계가 끝날 때

렌더링의 커밋 단계
리액트가 DOM 수정 후 변경사항을 저장(커밋)하는 단계

• 이때가 리액트가 네트워크나 third-party 라이브러리 같은 외부 시스템을 동기화하기에도 좋은 시점