상태 관리 useEffect Hook

React 상태 관리와 useEffect Hook: 심층 탐구

 

React 개발에서 상태 관리란 컴포넌트의 데이터를 효율적으로 관리하고, 변경 시 컴포넌트를 재렌더링하는 것을 의미합니다. 이는 React 애플리케이션의 동적인 특성을 구현하는 데 필수적인 요소입니다. React 16.8 버전부터 도입된 useEffect Hook은 함수형 컴포넌트에서 상태 업데이트 이후 발생하는 부가적인 작업이나 외부 데이터 가져오기 등을 처리하는 강력한 도구를 제공합니다.

본 글에서는 React 상태 관리의 개념과 useEffect Hook의 역할, 그리고 다양한 활용 사례를 심층적으로 다루어, React 개발자들이 useEffect Hook을 효과적으로 활용할 수 있도록 돕고자 합니다.

React 상태 관리의 중요성

React 애플리케이션은 사용자의 상호 작용에 따라 상태가 지속적으로 변화합니다. 이러한 상태 변화를 효과적으로 관리하지 못하면, 다음과 같은 문제가 발생할 수 있습니다.

• 불필요한 재렌더링: 상태 변화가 발생할 때마다 모든 컴포넌트가 재렌더링되면 성능 저하를 야기할 수 있습니다.
• 데이터 흐름 복잡성: 복잡한 애플리케이션에서는 데이터 흐름이 복잡해져 버그 발생 가능성이 높아집니다.
• 테스트 어려움: 상태 관리가 복잡하면 단위 테스트가 어려워져 코드 품질이 저하될 수 있습니다.

useEffect Hook의 개념

useEffect Hook은 함수형 컴포넌트에서 side effect(부가적인 작업)를 처리하는 Hook입니다. side effect란 컴포넌트의 렌더링 결과에 직접적으로 영향을 미치지 않는 작업을 의미하며, 대표적인 예로는 다음과 같은 것들이 있습니다.

• 데이터 fetching: 서버에서 데이터를 가져오는 작업
• DOM 조작: DOM 요소를 직접 조작하는 작업
• 타이머 설정: 일정 시간마다 특정 작업을 수행하는 작업
• 구독: 이벤트나 데이터 스트림을 구독하는 작업

useEffect Hook은 componentDidMount, componentDidUpdate, componentWillUnmount 등과 같은 클래스형 컴포넌트의 생명주기 메서드를 대체하여 사용할 수 있습니다.

useEffect Hook의 기본 구조

useEffect(() => {
  // side effect 로직
  return () => {
    // cleanup function
  };
}, [deps]);

 

• 첫 번째 인자: 실행될 함수
• 두 번째 인자: 의존성 배열 (optional)
  • 의존성 배열에 포함된 값이 변경될 때마다 useEffect 함수가 실행됩니다.
  • 빈 배열([])을 전달하면 컴포넌트가 마운트될 때 한 번만 실행됩니다.
  • null을 전달하면 모든 렌더링마다 실행됩니다.

728x90

useEffect Hook 활용 사례

• 데이터 fetching:

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data');
      setData(response.data);
    };
    fetchData();
  }, []);
  

   
• DOM 조작:

  useEffect(() => {
    const element = document.getElementById('myElement');
    element.addEventListener('click', handleClick);
    return () => {
      element.removeEventListener('click', handleClick);
    };
  }, []);
  

   
• 타이머 설정:

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 주기적으로 실행할 작업
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);
  

   
• 구독:

  useEffect(() => {
    const subscription = socket.on('message', (data) => {
      // 메시지 처리
    });
    return () => subscription.unsubscribe();
  }, []);
  

   

useEffect Hook 사용 시 주의사항

• 의존성 배열 관리: 의존성 배열을 정확하게 설정해야 불필요한 재렌더링을 방지할 수 있습니다.
• cleanup 함수: cleanup 함수를 통해 메모리 누수를 방지하고, side effect를 정리해야 합니다.
• 함수 내부에서 state 변경 주의: useEffect 함수 내부에서 state를 직접 변경하면 무한 루프에 빠질 수 있습니다.

결론

useEffect Hook은 React 개발에서 상태 관리를 더욱 유연하고 효율적으로 만들어주는 강력한 도구입니다. 본 글에서는 useEffect Hook의 기본 개념과 다양한 활용 사례를 살펴보았습니다. useEffect Hook을 효과적으로 활용하여 더욱 안정적이고 성능이 좋은 React 애플리케이션을 개발할 수 있기를 바랍니다.