한국어

ReactJS 튜토리얼

Hooks

ReactJS 고급 기능

추가 개념

ReactJS - useEffect 사용법: 초보자를 위한 종합 가이드

안녕하세요, 미래의 React 마법사 여러분! 오늘 우리는 React의 useEffect 세계로 흥미진진한 여정을 떠납니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되겠습니다. 우리는 단계별로 이를 탐구하겠습니다. 이 튜토리얼의 끝까지 따라오면, useEffect를 마스터하듯이 사용할 수 있을 것입니다!

ReactJS - Using useEffect

useEffect는 무엇인가요?

들어가기 전에, useEffect에 대해 이해해 보겠습니다. 케이크를 만들어 보세요. 재료를 섞고, 오븐에 넣고, 그런 다음... 무엇을 하겠습니까? 타이머를 설정할 수도 있을 것 같죠? useEffect는 React에서 이와 같은 역할을 합니다. 컴포넌트의 주요 작업인 UI 렌더링 외에 수행되는 "サイ드エフェクト"를 가능하게 합니다.

サイ드エフェクト는 다음과 같은 행동일 수 있습니다:

  • API에서 데이터 가져오기
  • DOM을 수동으로 변경하기
  • 구독 설정하기

이제 구체적인 내용을 알아보겠습니다!

useEffect의 서명

useEffect 훅은 특정 방식으로 작성되어야 합니다. 이를 분해해 보겠습니다:

useEffect(() => {
// 효과 코드 여기에
}, [dependencies]);

이 각 부분이 무엇을 의미하는지 살펴보겠습니다:

  1. useEffect: 우리가 사용하는 훅의 이름입니다.
  2. () => { ... }: 우리가 효과 코드를 넣는 아로 화살표 함수입니다.
  3. [dependencies]: 우리의 효과가 의존하는 모든 값을 나열하는 선택적 배열입니다.

간단한 예제를 보겠습니다:

import React, { useEffect, useState } from 'react';

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);

return () => clearInterval(interval);
}, []);

return <div>Seconds: {seconds}</div>;
}

이 예제에서 우리는 간단한 타이머를 만들고 있습니다. useEffect 훅은 인터벌을 설정하여 우리의 seconds 상태를 매秒마다 증가시킵니다. 빈 의존성 배열 []은 이 효과가 컴포넌트가 마운트될 때만 실행된다는 것을 의미합니다.

효과 훅의 기능

이제 기본 예제를 보았으니, 효과 훅의 주요 기능을 탐구해 보겠습니다:

  1. 시간: 기본적으로 모든 렌더링 후에 실행됩니다.
  2. 조건부 실행: 의존성 배열을 사용하여 효과 실행 시간을 제어할 수 있습니다.
  3. 정리: 효과에서 정리 함수를 반환하여 메모리 누수를 방지할 수 있습니다.

이제 각각의 기능을 더 자세히 살펴보겠습니다.

시간

기본적으로 useEffect는 모든 렌더링 후에 실행됩니다. 이는 상태를 업데이트하는 효과가 무한 루프를 유발할 수 있음을 의미합니다. 다음은 하지 말아야 할 예제입니다:

function BadExample() {
const [count, setCount] = useState(0);

useEffect(() => {
setCount(count + 1); // 이는 무한 루프를 유발합니다!
});

return <div>{count}</div>;
}

조건부 실행

효과가 불필요하게 실행되지 않도록 하기 위해 의존성 배열을 제공할 수 있습니다:

function ConditionalEffect({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetchUser(userId).then(data => setUser(data));
}, [userId]);

return <div>{user ? user.name : 'Loading...'}</div>;
}

이 예제에서 효과는 userId가 변경될 때만 실행됩니다.

정리

일부 효과는 메모리 누수를 방지하기 위해 정리 함수가 필요합니다. 다음은 이를 어떻게 하는지 보여줍니다:

function CleanupExample() {
useEffect(() => {
const subscription = subscribeToSomething();

return () => {
subscription.unsubscribe();
};
}, []);

return <div>I'm subscribed!</div>;
}

효과에서 반환된 함수는 컴포넌트가 언마운트될 때 호출됩니다.

API 데이터 가져오기

useEffect의 일반적인 사용 사례는 API에서 데이터 가져오기입니다. 예제를 보겠습니다:

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

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

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>Data: {JSON.stringify(data)}</div>;
}

이 컴포넌트는 마운트될 때 API에서 데이터를 가져오고, 로딩 및 오류 상태를 처리하며, 데이터가 준비되면 표시합니다.

DOM 변경

useEffect는 또한 DOM을 직접 조작할 수 있습니다. 예제를 보겠습니다:

function DOMManipulator() {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';

return () => {
element.style.color = '';
};
}, []);

return <div id="my-element">I'm red!</div>;
}

이 효과는 컴포넌트가 마운트될 때 요소의 색상을 빨간색으로 변경하고, 언마운트될 때 초기 색상으로 되돌립니다.

정리 함수

정리 함수에 대해 더 깊이 탐구해 보겠습니다. 정리 함수는 메모리 누수를 방지하는 데 필수적입니다. 더 복잡한 예제를 보겠습니다:

function WindowResizer() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>Window width: {windowWidth}px</div>;
}

이 예제에서 우리는 컴포넌트가 마운트될 때 이벤트 리스너를 추가하고, 언마운트될 때 이를 제거합니다. 이는 리스너가 더 이상 필요하지 않을 때 남아 있지 않도록 합니다.

요약

이제 우리가 useEffect에 대해 배운 내용을 요약해 보겠습니다:

기능 설명
서명 useEffect(() => { ... }, [dependencies])
시간 기본적으로 모든 렌더링 후에 실행됩니다
조건부 실행 의존성 배열을 사용하여 효과 실행 시간을 제어합니다
정리 효과에서 정리 함수를 반환하여 메모리 누수를 방지합니다
데이터 가져오기 API에서 데이터를 가져오는 데 사용됩니다
DOM 조작 직접 DOM을 조작할 수 있습니다
정리 함수 메모리 누수를 방지하는 데 필수적입니다

이제 useEffect에 대한 첫 걸음을 뗐습니다! 기억하시기 바랍니다, 강력한 도구를 사용하는 것은 연습이 필요합니다. 그래서 두려워 말고 실험하고 실수를 하세요 - 우리 모두가 배우는 방법입니다. 행복한 코딩을 기원하며, 당신의 효과가 항상 깨끗하고 컴포넌트가 항상 반응적이기를 바랍니다!

Credits: Image by storyset

이전 튜토리얼:
ReactJS - useState 사용
다음 튜토리얼:
ReactJS - useContext 사용