일부 구성 요소는 외부 시스템과 동기화해야 한다. 예를 들어 React 상태를 기반으로 비 React 구성 요소를 제어하거나 서버 연결을 설정하거나 구성 요소가 화면에 나타날 때 분석 로그를 보낼 수 있다. effect를 사용하면 렌더링 후 일부 코드를 실행할 수 있으므로 구성요소를 React 외부의 일부 시스템과 동기화 할 수 있다.
효과란 무엇이며 이벤트와 어떻게 다른가
effects에 도달하기 전에 일어나는 React 구성 요소 내부의 논리
- 렌더링 코드는 구성 요소의 최상위 수준에 있다. 렌더링 코드는 순수해야 한다.
- 이벤트 처리기는 구성 요소 내부에 있는 중첩된 함수로, 계산만 하는 것이 아니라 작업을 수행한다. 이벤트 핸들러는 입력 필드를 업데이트하거나 HTTP POST 요청을 제출하여 제품을 구매하거나 사용자를 다른 화면으로 이동할 수 있다. 이벤트 처리기에는 특정 사용자 작업으로 인해 발생하는 부수효과가 포함되어 있다.
그러나 때때로 이것은 충분하지 않다.
예를 들어 ChatRoom 화면에 표시될 때마다 채팅 서버에 연결해야 하는 구성요소를 고려하라. 서버에 연결하는 것은 순수한 계산이 아니므로 렌더링 중에 발생할 수 없다. 그러나 ChatRoom에는 표시를 유발 하는 클릭과 같은 단일 특정 이벤트는 없다.
effect를 사용하면 특정 이벤트가 아닌 렌더링 자체로 인해 발생하는 부작용을 지정할 수 있다. 채팅에서 메시지를 보내는 것은 사용자가 특정 버튼을 클릭함으로써 직접적으로 발생하기 때문에 이벤트이다. 그러나 서버 연결을 설정하는 것은 상호 작용에 관계없이 발생해야 하기 때문에 하나의 effect이다. effect는 화면 업데이트 후 커밋이 끝날 때 실행된다.
효과가 필요하지 않을 수 있다.
구성요소에 effect를 추가하기 위해 서두르지 말아라. Effect는 일반적으로 React 코드에서 벗어나 일부 외부 시스템과 동기화하는 데 사용된다. 여기에는 브라우저 API, 타사 위젯, 네트워크 등이 포함된다. Effect가 다른 상태에 따라 일부 상태만 조정하는 경우 Effect가 필요하지 않을 수 있다.
불필요한 효과를 제거하는 방법
- 렌더링을 위해 데이터를 변환하는 데 효과가 필요하지 않다. 예를 들어 목록을 표시하기 전에 목록을 필터링한다고 가정해보자. 목록이 변경될 때 상태 변수를 업데이트하는 effect를 작성하고 싶을 수 있다. 그러나 이것은 비효율적이다. 상태를 업데이트 하면 react는 먼저 구성 요소 함수를 호출하여 화면에 표시되어야 하는 내용을 계산한다. 그런 다음 React는 이러한 변경 사항을 DOM에 커밋하여 화면을 업데이트한다. 그러면 React가 Effect를 실행한다. effect도 즉시 상태를 업데이트하면 전체 프로세스가 처음부터 다시 시작된다. 불필요한 렌더링 패스를 피하려면 구성 요소의 최상위 수준에서 모든 데이터를 변환해라. 해당 코드는 소품 또는 상태가 변경될 때마다 자동으로 다시 실행된다.
- 사용자 이벤트를 처리하기 위해 effect가 필요하지 않다.
효과 작성 방법
- 효과를 선언한다. 기본적으로 효과는 모든 렌더링 후에 실행된다.
- 효과 종속성을 지정한다. 대부분의 효과는 렌더링할 때마다가 아니라 필요할 때만 다시 실행해야 한다. 예를 들어 페이드 인 애니메이션은 구성 요소가 나타날 때만 트리거되어야 한다. 채팅방 연결 및 연결 해제는 구성 요소가 나타났다가 사라지거나 채팅방이 변경될 때만 발생해야 한다. 종속성을 지정하여 이를 제어하는 방법을 배운다
- 필요한 경우 정리함수를 추가한다. 이룹 효과는 수행 중이던 작업을 중지, 실행 취소 또는 정리하는 방법을 지정해야 한다. 예를 들어 connect에는 disconnect가 필요하고 subscribe에는 unsubscribe가 필요하며 fetch에는 cancel 또는 ignore가 필요하다.
Effect에서 데이터 가져오기에 대한 좋은 대안
Effects 내에서 fetch 호출을 작성하는 것은 데이터를 가져오는 인기 있는 방법이다. 그러나 이것은 매우 수동적인 접근 방식이며 상당한 단점이 있다.
- 효과는 서버에서 실행되지 않는다. 즉 초기 서버 렌더링 HTML에는 데이터가 없는 로드 상태만 포함된다. 클라이언트 컴퓨터는 이제 데이터를 로드해야 한다는 사실을 발견하기 위해서만 모든 javascript를 다운로드하고 앱을 렌더링해야 한다.
- effects에서 직접 가져오면 네트워크 폭포를 쉽게 만들 수 있다. 상위 구성 요소를 렌더링하면 일부 데이터를 가져오고 하위 구성 요소를 렌더링한 다음 데이터 가져오기를 시작한다. 네트워크가 매우 빠르지 않으면 모든 데이터를 병렬로 가져오는 것보다 훨씬 느리다.
- effects에서 직접 가져오는 것은 일반적으로 데이터를 미리 로드하거나 캐시하지 않는다는 것을 의미한다.
