✨ useEffect 훅 완벽 이해하기

이번 글에서는 초보자도 쉽게 이해할 수 있도록 React의 중요한 Hook 중 하나인 useEffect에 대해 설명하고, 실제 사용 사례를 통해 어떻게 활용할 수 있는지 알아보겠습니다.

🎯 useEffect란 무엇인가?

useEffect는 컴포넌트가 렌더링된 이후에 특정 작업을 수행하도록 하는 Hook입니다. 주로 데이터 불러오기, 구독 설정, 이벤트 리스너 추가와 같은 작업에 사용됩니다.

기본 사용법:

useEffect(() => {
    // 수행할 작업
}, [dependencies]);

• 콜백 함수: 컴포넌트가 렌더링된 후 실행할 작업입니다.
• dependencies(의존성 배열): 의존성 배열이 바뀔 때마다 콜백 함수를 다시 실행합니다.

✅ 활용 사례 1: 데이터 불러오기

컴포넌트가 마운트된 후 데이터를 불러오는 가장 흔한 useEffect 사용 예시입니다.

useEffect(() => {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
}, []);

✅ 활용 사례 2: 특정 상태가 변경될 때만 실행하기

특정 상태가 변경될 때마다 작업을 수행하려면 의존성 배열에 상태를 추가하면 됩니다.

useEffect(() => {
    console.log('상태가 변경되었습니다.', state);
}, [state]);

✅ 활용 사례 3: 컴포넌트 정리(clean-up)

컴포넌트가 언마운트될 때 정리 작업을 수행할 수도 있습니다.

useEffect(() => {
    const timer = setInterval(() => {
        console.log('타이머 실행 중');
    }, 1000);

    return () => clearInterval(timer); // 정리 작업
}, []);

📌 useEffect 사용 시 주의할 점

• 무한 루프에 빠지지 않도록 의존성 배열을 정확히 설정해야 합니다.
• 비동기 작업이나 외부 리소스 접근 시 clean-up 함수를 적절히 작성해줘야 합니다.

🎈 마무리

이번 글을 통해 useEffect의 기본 개념과 다양한 활용법을 이해하셨길 바랍니다. 반복적인 연습을 통해 React 애플리케이션에서 useEffect를 능숙하게 활용해 보세요!