useEffect는 component를 외부 system과 동기화할 수 있는 React Hook
참조
component의 최상위 level에서 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]);
// ...
}Parameters
-
setup: Effect의 logic이 포함된 함수입니다. setup 함수는 선택적으로 cleanup 함수를 반환할 수도 있습니다. component가 DOM에 추가되면 React는 setup 함수를 실행합니다. 변경된 종속성으로 다시 rendering할 때마다 React는 먼저 이전 값으로 cleanup 함수를 실행한 다음 새 값으로 setup 함수를 실행합니다. component가 DOM에서 제거된 후 React는 cleanup 함수를 실행합니다. -
선택적
의존성: setup code 내부에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, component 본문 내부에서 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 React용으로 구성된 경우, 모든 반응형 값이 종속성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며[dep1, dep2, dep3]과 같이 inline으로 작성해야 합니다. React는 Object.is 비교를 사용하여 각 의존성을 이전 값과 비교합니다. 이 인수를 생략하면 component를 다시 rendering할 때마다 Effect가 다시 실행됩니다. 의존성 배열을 전달할 때와 빈 배열을 전달할 때, 그리고 의존성을 전혀 전달하지 않을 때의 차이를 확인해 보세요.
반환값
- useEffect는 정의되지 않은 값을 반환합니다.
주의
-
useEffect는 Hook이므로 component의 최상위 level이나 자체 Hook에서만 호출할 수 있습니다. loop나 condition 내부에서는 호출할 수 없습니다. 필요한 경우 새 component를 추출하고 state를 그 안으로 이동하세요.
-
외부 system과 동기화하려는 것이 아니라면 Effect가 필요하지 않을 것입니다.
-
종속성 중 일부가 component 내부에 정의된 객체 또는 함수인 경우 Effect가 필요 이상으로 자주 다시 실행될 위험이 있습니다. 이 문제를 해결하려면 불필요한 객체 및 함수 종속성을 제거하세요. 또한, state updates와 비반응형 logic을 Effect 외부로 추출할 수도 있습니다.
- Effect는 client에서만 실행됩니다. server rendering 중에는 실행되지 않습니다.
