useEffect (3)

커스텀 훅으로 Effect 감싸기

 

Effect는 탈출구이다. 리액트를 벗어나야 할 때, 또는 더 나은 빌트인 솔루션이 없을 때 사용한다. Effect를 수동으로 작성해야 하는 경우가 자주 발생한다면 이는 컴포넌트가 의존하는 일반적인 동작에 대한 커스텀 훅을 추출해야 한다는 신호일 수 있다.

 

예를 들어 이 useChatRoom에 커스텀 훅은 Effect의 로직을 보다 선언적인 API 뒤에 숨긴다.

 

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
  });

 

 

Effect를 이용한 데이터 페칭

 

컴포넌트에 데이터를 페칭하기 위해 Effect를 사용할 수 있다. 만약 프레임워크를 사용하고 있다면 프레임워크의 데이터 페칭 메커니즘을 이용하는 것이 Effect를 직접 작성하는 것보다 더 효율적이다.

 

만약 직접 Effect를 작성하여 데이터를 페칭하고 싶다면 코드참조

 

import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);

  useEffect(() => {
    let ignore = false;
    setBio(null);
    fetchBio(person).then(result => {
      if (!ignore) {
        setBio(result);
      }
    });
    return () => {
      ignore = true;
    };
  }, [person]);

 

ignore변수의 초기값이 false로 설정되고 정리 함수 동작 중에 true로 설정되는 것에 주목하라. 이 로직은 코드가 경쟁상태 (race conditions)에 빠지지 않도록 보장해준다. 네트워크 요청을 보낸 순서와 응답을 받는 순서가 다르게 동작할 수 있기 때문에 이러한 처리가 필요하다.

 

경쟁상태: 비동기 작업을 수행할 때 흔히 발생하는 문제 중 하나이다. 네트워크 요청과 같은 비동기 작업의 순서가 예측되지 않기 때문에 발생할 수 있다. 이를 방지하기 위해 ignore 변수를 사용한다.