[React] useEffect 사용법 및 예제 - React Hook

React Hook - useEffect

 

 

 

 

💬 useEffect란?

• 어떠한 컴포넌트가 Mount, Update, Unmount 되었을 때 특정 작업을 실행
• 인자로는 콜백함수(Callback Function)을 받음
• Mount : 화면에 첫 렌더링
• Update : 다시 렌더링
• Unmount : 화면에서 사라질 때

 

---

 

😎 useEffect 사용하기

 

App.js

 

1. 우선 useEffect 를 사용하기 위해 import를 시켜줘야한다.

import { useEffect } from 'react';

 

2. 기본적인 useEffect 문법은 2가지 형태가 있다.

// 1번
useEffect(() => {/* 작업.. */});

// 2번
useEffect(() => {/* 작업.. */}, [value]);

1번 useEffect는 화면이 랜더링 될 때마다 실행 

2번 useEffect는 화면이 첫 렌더링 될 때 실행하며, value 값이 바뀔 때 실행

(value값이 빈 배열이면 화면에 첫 렌더링 될때만 실행)

(이 value를 Dependency Array라고 부름)

 

---

🔥 useEffect 예시

 

첫 번째 예시는 버튼 클릭시 1씩 증가하는 대표적인 Counter 예시와,

input의 value를 받아 화면에 띄어주는 예시이다.

 

UseEffect.js

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

const UseEffect = () => {
    const [count, setCount] = useState(1);
    const [name, setName] = useState("");

    const handleClick = () => {
        setCount(count + 1);
    }

    const handleInputChange = (e) => {
        setName(e.target.value);
    }
    
    // 랜더링 될때마다 매번 실행
    useEffect(() => {
        console.log('랜더링 완료');
    });

    return (
        <div>   
            <button onClick={handleClick}>Update</button>
            <span>Count : {count}</span>
            <div>Name : {name}</div>
            <input type="text" value={name} 
            onChange={handleInputChange}/>
        </div>
    );
};

export default UseEffect;

 

실행화면 ✨

 

 

useEffect에 Dependency Array가 없어 

Count, Input State가 바뀔 때마다 useEffect가 호출된다.

 

만약 원하는 State가 변경 될 때마다 코드를 실행시켜야 한다면?

- Dependency Array에 값을 넣어주면 된다.

 

 // Count가 변경될 때마다 실행
 useEffect(() => {
     console.log('🔥 Count Effect');
 }, [count]);

 // Name이 변경될 때마다 실행
 useEffect(() => {
     console.log('👀 Name Effect');
 }, [name]);

 // 첫 랜더링 때 실행
 useEffect(() => {
     console.log('💬 처음 렌더링 Effect!');
 }, []);

 

실행화면 ✨

 

 

 

 

---

 

🔥 useEffect & Clean up 예제

 

useEffect & clean up 예시는 버튼을 클릭하면 console에 타이머가 1초마다 실행되며,

Effect_Timer라는 컴포넌트를 Mount나 Unmount 시켜준다.

 

UseEffect.js

 

import React, { useState, useEffect } from 'react';
import Effect_Timer from './component/Effect_Timer';

const UseEffect = () => {
    const [showTimer, setShowTimer] = useState(false);

    const handleShowTimer = () => {
        setShowTimer(!showTimer)
    }
    return (
        <div>   
            {showTimer && <Effect_Timer />}
            <button onClick={handleShowTimer}>Toggle Timer</button>
        </div>
    );
};

export default UseEffect;

 

 

Effect_Timer.js

import React, { useEffect } from 'react';

const Effect_Timer = () => {
    useEffect(() => {
        const timer = setInterval(() => {
            console.log("타이머 실행되는중...");
        }, 1000)
    }, []);

    return (
        <div>
            <span>타이머를 시작합니다. 콘솔을 보세요.</span>
        </div>
    );
};

export default Effect_Timer;

 

실행화면 ✨

 

실행화면을 보면 Toggle Timer 버튼을 다시 눌러도 타이머가 계속 실행된다.

그 이유는 Effect_Timer 컴포넌트 내에서 UseEffect를 보면

 

Effect_Timer.js

useEffect(() => {
     const timer = setInterval(() => {
         console.log("타이머 실행되는중...");
     }, 1000)
 }, []);

Timer를 만들었는데 종료 시켜줄 코드를 작성하지 않았다.

종료 시켜줄 코드는 useEffect에 return으로 작성하면 된다.

 

 

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

     return () => {
         clearInterval(timer);
         console.log("🔥 타이머가 종료 되었습니다.");
     }
 }, []);

return은 Effect_Timer 컴포넌트가 Unmount 될 때 실행되는 코드이다.

 

 

실행화면 ✨

 

 

---

🐱‍👤 결론

1. 무거운 작업이 있을 때 useEffect 사용 (재렌더링 방지)

2. Dependency Array가 없으면 렌더링 마다 실행

3. Dependency Array가 있으면 첫 렌더링, Array 값이 바뀔 때마다 실행

4. Dependency Array가 빈값이면 첫 렌더링 때만 실행

5. useEffect에 return 값은 clear 즉 Unmount 될 때 실행할 코드