이해되는 영역까지만 번역 기록을 남긴다
useEffect 공식문서 읽기
useEffect는 컴포넌트 최상단에서 effect를 선언한다.
import { useEffect } from 'react';
import { createConnection } from './chat.js';
function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => {
connection.disconnect();
};
}, [serverUrl, roomId]);
// ...
}Usage
- 한 컴포넌트의 최상단에서 하나만 사용하라 / 반복문이나 조건문 안에서 부를 수 없다.
- 일부 외부 시스템과 동기화하지 않을 경우 효과가 필요하지 않을 수 있습니다.
- 엄격모드를 사용하면 한번 더 사이클을 실행한다.(로직을 미러링하고 설정이 수행하는 모든 작업을 중지하거나 실행 취소하는 지 확인하는 스트레스 테스트를 위해)
- 만약 일부 의존성 배열이 컴포넌트 내에서 정의된 객체나 함수라면, 필요 이상으로 Effect가 더 자주 재실행될 수 있는 위험이 있습니다. 이를 해결하기 위해 불필요한 의존성배열을 제거할 수 있습니다. 또한 상태 업데이트와 반응적이지 않은 로직을 Effect 밖으로 추출할 수도 있습니다.
- 만약 Effect가 클릭과 같은 상호작용에 의해 발생되지 않았다면, React는 브라우저가 업데이트된 화면을 그린 후에 Effect를 실행합니다. 만약 Effect가 시각적인 작업(예: 툴팁의 위치 조정)을 수행하고 딜레이가 눈에 띈다면 (예: 깜빡임), useEffect를 useLayoutEffect로 대체하세요.
⚙
useEffect는 비동기적으로 작업을 처리하고 컴포넌트의 렌더링이 완료된 후에 Effect를 실행합니다. 이는 일반적으로 대부분의 경우에 적합한 방식입니다. 하지만 시각적인 작업을 수행하는 Effect의 경우, 화면이 업데이트되기 전에 Effect가 실행되면 불필요한 화면 깜빡임과 같은 문제가 발생할 수 있습니다.
이 때문에 useLayoutEffect가 도입되었습니다. useLayoutEffect는 useEffect와 유사하지만, 브라우저가 화면을 그리기 전에 Effect를 동기적으로 실행합니다. 즉, 화면 업데이트와 Effect 실행 사이에 딜레이가 없습니다. 이를 통해 시각적인 작업을 정확하게 처리하고 깜빡임과 같은 문제를 방지할 수 있습니다.
- 클라이언트에서만 실행된다. 서버 렌더링 중에는 실행되지 않는다.
Connecting to an external system
외부 시스템과의 연결
➕ 외부 시스템
네트워크, 브라우저 API, 제 3자 라이브러리와 연결되는 경우 react로 제어되지 않기 때문에 외부라고 부름
- setInterval() 및 clearInterval()을 사용하여 관리되는 타이머.
- window.addEventListener() 및 window.removeEventListener()를 사용한 이벤트 구독.
- animation.start() 및 animation.reset()과 같은 API를 사용하는 제3자 애니메이션 라이브러리.
window.addEventListener() 가 외부 시스템으로 본다면 onClick은 내부 시스템이야 외부 시스템일까?
챗GPT 답변
window.addEventListener()는 브라우저의 이벤트 시스템과 상호작용하기 위해 사용되는 함수입니다. 이벤트를 수신하고 처리하기 위해 브라우저의 "외부 시스템"과 연결하는 것으로 간주할 수 있습니다.
반면, onClick과 같은 React의 이벤트 핸들러는 React 컴포넌트 내부에서 정의되고 사용되는 것입니다. React는 내부적으로 이벤트 핸들러를 관리하고 이벤트 시스템을 추상화하여 컴포넌트와 상호작용하는 데 사용됩니다. 따라서 onClick과 같은 React의 이벤트 핸들러는 "내부 시스템"으로 간주할 수 있습니다.
예제
- Connecting to a chat server
- Listening to a global browser event
- Triggering an animation
- Controlling a modal dialog
