React의 useEffect

클래스에서 함수로의 전환

클래스 구성 요소에서 수명 주기 메서드는 일반적으로 구성 요소를 탑재하거나 업데이트하는 데 사용됩니다. 기능 구성 요소로 작업하는 동안에는 수명 주기 방법이 없으며 작업을 마운트하거나 업데이트하는 데 사용할 수 있는 useEffect 후크가 있습니다.
기능 구성 요소에서 useEffect 후크를 사용하려면 다음과 같이 반응에서 가져와야 합니다.

import { useEffect } from 'react';

기본적인 부작용 만들기

클래스 구성 요소에서 모든 부작용은 수명 주기 메서드에서 사용됩니다. 이 접근 방식은 몇 가지 부작용이 관련된 경우 매우 간단하지만 정리해야 하는 여러 부작용이 포함된 경우 이 접근 방식이 혼란스러워집니다. useEffect 를 사용하면 각 부작용이 자체 useEffect 후크에서 정리와 함께 정의됩니다.

가장 기본적인 부작용은 useEffect 에 단일 함수를 전달하여 얻을 수 있습니다. 이 함수는 실행하려는 부작용입니다.

useEffect(() => {
   console.log('This is your first side effect!')
});

이 부작용은 구성 요소가 처음 마운트되거나 소품 또는 상태가 변경될 때 구성 요소가 렌더링될 때마다 실행됩니다. 컴포넌트가 마운트되거나 특정 상태/소품이 변경될 때만 부작용이 필요한 경우에는 이상적이지 않습니다. 이러한 이유로 useEffect 후크는 배열인 선택적 두 번째 매개변수를 허용합니다. 이 배열의 값은 각 재렌더링 동안 이전 렌더링 동안의 배열 값과 비교되며 부작용은 배열의 값이 이전 렌더링 동안의 값과 다른 경우에만 실행됩니다. 따라서 마운트 시 부작용을 실행하려면 두 번째 매개변수로 빈 배열을 전달해야 후속 재렌더링 간에 값이 변경되지 않습니다. 이것은 다음과 같이 달성할 수 있습니다.

useEffect(() => {
   console.log('Run side effect on mount')
},[]);

useEffect 후크의 두 번째 배열 매개변수에 값을 넣으면 배열 내부의 값이 변경될 때마다 부작용이 실행됩니다. 이것은 다음과 같이 달성할 수 있습니다.

useEffect(() => {
   console.log('Run side effect on value change')
},[value]);

이제 좀 더 복잡한 예를 살펴보겠습니다.

const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;
    if(keyCode === 32 || (keyCode >= 65 && keyCode <= 90)){
        setUserText(prevUserText => `${prevUserText}${key}`);
    }
}, []);

   useEffect(() => {
       window.addEventListener("keyup", handleUserKeyPress);

      }, [handleUserKeyPress]);

      return (
          <div>
              <h1>Feel free to type!</h1>
              <blockquote>{userText}</blockquote>
          </div>
  );

여기서 부작용은 handleUserKeyPress 값이 변경될 때마다 실행됩니다.

부작용 청소

부작용을 설정하는 지식을 가지고 이제 부작용을 정리하는 방법을 이해해야 합니다. useEffect는 부작용이 실행될 때마다 실행되는 반환 함수인 세 번째 매개변수를 허용합니다. 이전 예를 사용하여:

useEffect(() => {
   console.log('This is your first side effect!')

   return () => {
     console.log('This is your first clean up!')
   }
});

이제 이전 창 개체 부작용에 대한 정리를 구현하는 방법을 살펴보겠습니다.

const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;
    if(keyCode === 32 || (keyCode >= 65 && keyCode <= 90)){
        setUserText(prevUserText => `${prevUserText}${key}`);
    }
}, []);

   useEffect(() => {
       window.addEventListener("keyup", handleUserKeyPress);
       return () => {
         window.removeEventListener("keydown", handleUserKeyPress);
    };

      }, [handleUserKeyPress]);

      return (
          <div>
              <h1>Feel free to type!</h1>
              <blockquote>{userText}</blockquote>
          </div>
  );

여기서 반환 함수는 이벤트 리스너를 제거하는 정리 함수입니다.

결론

useEffect 후크는 props 또는 state가 변경될 때 부작용을 단순화하고 구성 요소를 정리합니다. 클래스 구성 요소의 수명 주기 메서드와 비교할 때 useState 후크는 각 부작용이 개별 후크를 가져오기 때문에 부작용을 구성하는 데 도움이 됩니다.