탈출구
일부 컴포넌트는 React 외부 시스템과 제어 및 동기화해야 할 수 있습니다. 예를 들어, 브라우저 API를 사용하여 입력 필드에 포커스를 맞추거나, React 없이 구현된 비디오 플레이어를 재생 및 일시 정지하거나, 원격 서버에 연결하여 메시지를 수신해야 할 수 있습니다. 이 장에서는 React를 "벗어나" 외부 시스템에 연결할 수 있게 해주는 탈출구를 배우게 됩니다. 대부분의 애플리케이션 로직과 데이터 흐름은 이러한 기능에 의존해서는 안 됩니다.
ref로 값 참조하기
컴포넌트가 어떤 정보를 "기억"하게 하고 싶지만, 그 정보가새로운 렌더링을 트리거하지 않도록 하려면 ref를 사용할 수 있습니다:
state와 마찬가지로 ref는 리렌더링 사이에 React에 의해 유지됩니다. 그러나 state를 설정하면 컴포넌트가 리렌더링됩니다. ref를 변경해도 그렇지 않습니다!ref.current속성을 통해 해당 ref의 현재 값에 접근할 수 있습니다.
ref는 React가 추적하지 않는 컴포넌트의 비밀 주머니와 같습니다. 예를 들어, ref를 사용하여타임아웃 ID,DOM 요소및 컴포넌트의 렌더링 출력에 영향을 미치지 않는 다른 객체들을 저장할 수 있습니다.
ref로 DOM 조작하기
React는 렌더링 출력과 일치하도록 DOM을 자동으로 업데이트하므로, 컴포넌트가 DOM을 조작해야 할 일은 많지 않습니다. 그러나 때로는 React가 관리하는 DOM 요소에 접근해야 할 수 있습니다. 예를 들어, 노드에 포커스를 맞추거나, 스크롤하거나, 크기와 위치를 측정해야 할 수 있습니다. React에는 이러한 작업을 수행할 수 있는 내장된 방법이 없으므로 DOM 노드에 대한 ref가 필요합니다. 예를 들어, 버튼을 클릭하면 ref를 사용하여 입력 필드에 포커스를 맞춥니다:
Effect와 동기화하기
일부 컴포넌트는 외부 시스템과 동기화해야 합니다. 예를 들어, React state를 기반으로 비 React 컴포넌트를 제어하거나, 서버 연결을 설정하거나, 컴포넌트가 화면에 나타날 때 분석 로그를 전송하고 싶을 수 있습니다. 특정 이벤트를 처리할 수 있는 이벤트 핸들러와 달리,Effect를 사용하면 렌더링 후에 일부 코드를 실행할 수 있습니다. Effect를 사용하여 컴포넌트를 React 외부 시스템과 동기화하세요.
재생/일시 정지를 몇 번 눌러보고 비디오 플레이어가isPlayingprop 값과 어떻게 동기화되는지 확인하세요:
많은 Effect는 실행 후 자신을 "정리"합니다. 예를 들어, 채팅 서버에 대한 연결을 설정하는 Effect는 React에게 해당 서버에서 컴포넌트를 어떻게 연결 해제할지 알려주는클린업 함수를 반환해야 합니다:
개발 환경에서 React는 Effect를 한 번 더 즉시 실행하고 정리합니다. 이것이"✅ Connecting..."가 두 번 출력되는 이유입니다. 이를 통해 클린업 함수 구현을 잊지 않도록 보장합니다.
Effect가 필요하지 않을 수도 있습니다
Effect는 React 패러다임에서 벗어나는 탈출구입니다. 이를 통해 React "외부"로 나가 컴포넌트를 일부 외부 시스템과 동기화할 수 있습니다. 외부 시스템이 관련되지 않은 경우(예: 일부 props나 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우) Effect가 필요하지 않습니다. 불필요한 Effect를 제거하면 코드를 더 쉽게 이해할 수 있고, 실행 속도가 빨라지며, 오류 가능성이 줄어듭니다.
Effect가 필요하지 않은 일반적인 경우는 두 가지입니다:
- 렌더링을 위한 데이터 변환에는 Effect가 필요하지 않습니다.
- 사용자 이벤트 처리에는 Effect가 필요하지 않습니다.
예를 들어, 다른 state를 기반으로 일부 state를 조정하기 위해 Effect가 필요하지 않습니다:
대신, 가능한 한 렌더링 중에 계산하세요:
그러나 외부 시스템과 동기화하기 위해서는 Effect가필요합니다.
반응형 Effect의 생명주기
Effect는 컴포넌트와 다른 생명주기를 가집니다. 컴포넌트는 마운트, 업데이트, 언마운트될 수 있습니다. Effect는 두 가지 작업만 할 수 있습니다: 무언가를 동기화하기 시작하고, 나중에 동기화를 중지하는 것입니다. 이 주기는 Effect가 시간이 지남에 따라 변경되는 props와 state에 의존하는 경우 여러 번 발생할 수 있습니다.
이 Effect는 roomIdprop의 값에 의존합니다. Props는반응형 값으로, 다시 렌더링될 때 변경될 수 있음을 의미합니다.재동기화(서버에 재연결)된다는 점에 주목하세요:roomId가 변경되면 Effect가
React는 Effect의 의존성을 올바르게 지정했는지 확인하는 린터 규칙을 제공합니다. 위 예제에서 의존성 목록에roomId를 지정하는 것을 잊으면 린터가 자동으로 해당 버그를 찾아냅니다.
이벤트와 Effect 분리하기
이벤트 핸들러는 동일한 상호작용을 다시 수행할 때만 다시 실행됩니다. 이벤트 핸들러와 달리, Effect는 읽는 값(예: props나 state)이 마지막 렌더링 때와 다르면 다시 동기화됩니다. 때로는 두 동작을 혼합한 형태, 즉 일부 값에는 반응하여 다시 실행되지만 다른 값에는 반응하지 않는 Effect를 원할 수 있습니다.
Effect 내부의 모든 코드는반응형입니다. 읽는 반응형 값 중 일부가 리렌더링으로 인해 변경되면 다시 실행됩니다. 예를 들어, 이 Effect는roomId나 theme중 하나라도 변경되면 채팅에 다시 연결됩니다:
이는 이상적이지 않습니다. roomId가 변경된 경우에만 채팅에 다시 연결하고 싶을 것입니다.theme을 전환해도 채팅에 다시 연결되어서는 안 됩니다!theme을 읽는 코드를 Effect에서 꺼내서Effect Event로 옮기세요:
Effect Event 내부의 코드는 반응형이 아니므로,theme을 변경해도 Effect가 다시 연결되지 않습니다.
Effect 의존성 제거하기
Effect를 작성할 때, 린터는 Effect가 읽는 모든 반응형 값(예: props와 state)을 Effect의 의존성 목록에 포함했는지 확인합니다. 이렇게 하면 Effect가 컴포넌트의 최신 props 및 state와 동기화 상태를 유지할 수 있습니다. 불필요한 의존성은 Effect가 너무 자주 실행되게 하거나 무한 루프를 생성할 수도 있습니다. 이를 제거하는 방법은 경우에 따라 다릅니다.
예를 들어, 이 Effect는 입력을 편집할 때마다 다시 생성되는options 객체에 의존합니다:
채팅에서 메시지를 입력할 때마다 채팅이 다시 연결되는 것을 원하지 않을 것입니다. 이 문제를 해결하려면options객체 생성을 Effect 내부로 옮겨서 Effect가roomId문자열에만 의존하도록 하세요:
의존성 목록을 편집하여 options의존성을 제거하는 것으로 시작하지 않았다는 점에 주목하세요. 그것은 잘못된 방법입니다. 대신, 주변 코드를 변경하여 의존성이불필요해지도록했습니다. 의존성 목록을 Effect의 코드에서 사용되는 모든 반응형 값의 목록으로 생각하세요. 그 목록에 무엇을 넣을지 의도적으로 선택하지 않습니다. 목록은 코드를 설명합니다. 의존성 목록을 변경하려면 코드를 변경하세요.
커스텀 훅으로 로직 재사용하기
React는 useState,useContext, useEffect와 같은 내장 훅을 제공합니다. 때로는 더 구체적인 목적을 위한 훅이 있었으면 하는 경우가 있습니다: 예를 들어, 데이터를 가져오거나, 사용자가 온라인 상태인지 추적하거나, 채팅방에 연결하는 것과 같은 목적입니다. 이를 위해 애플리케이션의 필요에 맞는 자신만의 훅을 만들 수 있습니다.
이 예시에서 usePointerPosition커스텀 훅은 커서 위치를 추적하고,useDelayedValue커스텀 훅은 전달한 값보다 특정 밀리초만큼 "뒤처진" 값을 반환합니다. 샌드박스 미리보기 영역 위로 커서를 움직여 커서를 따라가는 움직이는 점들의 꼬리를 확인해 보세요:
커스텀 훅을 만들고, 함께 구성하고, 데이터를 전달하며, 컴포넌트 간에 재사용할 수 있습니다. 앱이 성장함에 따라 이미 작성한 커스텀 훅을 재사용할 수 있기 때문에 직접 작성하는 Effect는 점점 줄어들 것입니다. React 커뮤니티에서 유지 관리하는 훌륭한 커스텀 훅도 많이 있습니다.
다음은 무엇인가요?
이 장을 페이지별로 읽기 시작하려면