4. React Hook, useEffect

useEffect

useEffect(setup, dependencies?)

문법

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();
		// cleanup 함수
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

파라미터

• setup: Effect 로직이 포함된 함수. cleanup return 함수는 선택적으로 반환할 수 있습니다. 컴포넌트가 DOM에 추가되면 React가 setup 함수를 실행합니다. 변경된 dependencies를 다시 렌더링할 때마다, React는 먼저 cleanup 함수(해당 함수를 선언한 경우)를 실행한 다음 새로운 values로 setup 함수를 실행합니다. 구성요소가 DOM에서 제거된 후, React는 cleanup 함수를 실행합니다.

• dependencies(optional): setup 코드 내에서 참조되는 모든 reactive values의 목록. Reactive values에는 컴포넌트 내에서 직접 선언된 props, state, 모든 변수와 함수가 포함됩니다. 만약 린트(ESlint)가 포함된 경우 모든 reactive value값이 dependency에 올바르게 지정되었는지 검사합니다. dependencies list에는 항목 수가 일정해야 하며 [dep1, dep2, dep3] 과 같이 인라인으로 작성해야 합니다. React는 Object.is비교를 사용하여 각 dependencies를 이전 값과 비교합니다.
만약 dependencies를 생략한다면 컴포넌트가 다시 렌더링할 때마다 Effect가 다시 실행됩니다. 컴포넌트가 다시 실행되는 경우는 첫 렌더링시 이기 때문에 dependencies를 생략된 경우는 첫 렌더링 시에만 실행됩니다.

반환값

주의 사항

• useEffect는 Hook이므로 컴포넌트 또는 자체 Hooks의 최상위 레벨에서만 호출할 수 있습니다. 또한 조건문이나 루프문에서 호출할 수 없습니다. 필요한 경우 새 컴포넌트를 추출하고 해당 컴포넌트로 state를 이동합니다.

• 외부 시스템과 동기화하려는 것이 아니라면 아마 Effect가 필요 없을 것입니다.

• Strict Mode가 켜져있으면 React는 실제 setup 함수 전에 개발 전용 setup + cleanup 주기를 실행합니다. 이것은 cleanup 로직이 setup logic을 “반사”하고, setup이 수행하는 모든 작업을 중지하거나 취소하는지 확인하는 stress-test입니다. 이로 인해 문제가 발생한다면 cleanup 함수를 구현하세요.

• dependencies 일부가 컴포넌트 내부에 정의된 개체 또는 함수인 경우 필요 이상으로 Effect가 다시 실행될 위험이 있습니다. 이러한 문제를 해결하려면 dependencies에 불필요한 개체 및 함수를 제거하면 됩니다. Effect 외부에서 state 업데이트 및 non-reactive 로직을 호출할 수 있습니다.

• Effect가 상호작용에 의해 발생하지 않은 경우 React는 브라우저가 Effect를 실행하기 전에 업데이트된 화면을 먼저 보여지게 하도록 합니다. Effect가 시각적인 작업을 수행하고 지연이 눈에 띄게 나타나는 경우(ex. 깜박임) useEffect 대신 useLayoutEffect를 사용해보세요.

• Effect가 상호작용에 의해 발생한 경우에도 브라우저는 Effect 내에서 state update를 처리하기 전에 화면을 다시 보여지게 할 수도 있습니다. 일반적으로 올바른 동작이지만, 브라우저가 화면을 다시 그리는 것을 차단해야 하는 경우 useEffect를 useLayoutEffect로 바꿔야 합니다.

• Effect는 client에서만 실행됩니다. 서버 렌더링 중에는 실행되지 않습니다.

사용법

1. 외부 시스템에 연결

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]);
  // ...
}

1. 해당 시스템에 연결하는 setup 함수:
• 해당 시스템에서 연결을 끊는 코드가 있는 경우 cleanup 함수를 반환해야 합니다.

2. 해당 함수 내에서 사용되는 컴포넌트의 모든 값을 포함하는 dependencies 목록입니다.

1. 컴포넌트가 페이지에 추가될 때(mounts) setup 코드가 실행됩니다.

2. dependencies가 번경될때마다 컴포넌트를 다시 렌더링합니다.
• 먼저, cleanup 코드가 이전 props 및 state로 실행됩니다.
• 그런 다음 setup 코드가 새로은 props 및 state로 실행됩니다.

3. 컴포넌트가 페이지에서 제거(unmounts)될 때 마지막으로 cleanup code가 한번 실행됩니다.

1. ChatRoom 컴포넌트가 페이지에 추가되면 초기 serverUrl 및 roomId로 채팅방에 연결됩니다.

2. 다시 렌더링의 결과로 serverUrl 또는 roomId가 변경되면(ex. 사용자가 다른 대화방을 선택한 경우) Effect는 이전 ChatRoom에서 연결이 끊어지고, 다음 ChatRoom에서 연결됩니다.

3. ChatRoom 컴포넌트가 페이지에서 제거되면 Effect는 마지막으로 연결을 끊습니다.

Note

• setInterval() 및 clearInterval()로 관리되는 타이머

• window.addEventListener() 및 window.removeEventListener()를 사용하는 이벤트

• animation.start() 및 animation.reset()과 같은 API가 있는 타사 애니메이션 라이브러리

2. 커스텀 hooks을 감싸는 Effect

function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

마무리

References

useEffect – React

The library for web and native user interfaces

https://react.dev/reference/react/useEffect