React > useEffect 훅에 대한 이해

 

시나리오

 

1. useState를 통해서 변수에 값을 저장하고 변경할 수 있었다. 
2. 변수가 언제 변경되는지 알 수 있을까?

3. 이때 필요한 것이 useEffect 이다. 
4. 변수가 변경될 때마다 useEffect 는 동작한다. (fetch, timer 에서도 감지한다.)

 

변화에 대한 감지를 다음과 같이 구분할 수 있다.

 

1. 모든 변화에 대해서 감지

2. 특정 변수에 대해서만 감지

3. 처음 한번만 감지

 

사용형식

useEffect(<function>, <dependency>)

 

# 모든 변화에 대해서 감지함.

import { useState, useEffect } from "react";

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

useEffect(()=>{
  console.log('감지');
});

<button onClick={() => setCount(count + 1)}>Click me</button>
<p>Count: {count}</p>

 

# 특정 변수에 대해서만 감지

import { useState, useEffect } from "react";

const [count, setCount] = useState(0);
const [text, setText] = useState('');

useEffect(()=>{
  console.log('감지');
}, [count]);

<button onClick={() => setCount(count + 1)}>Click me</button>
<p>Count: {count}</p>

<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
<p>Text: {text}</p>

 

# 한번만 감지

import { useState, useEffect } from "react";

const [count, setCount] = useState(0);
const [text, setText] = useState('');

useEffect(()=>{
  console.log('감지');
}, []);

<button onClick={() => setCount(count + 1)}>Click me</button>
<p>Count: {count}</p>

<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
<p>Text: {text}</p>