# useEffect
useEffect(() => {} )
- 어떤 컴포넌트가 Mount(화면에 첫 렌더링) → Update(다시렌더링) → Unmount(화면에서 사라질때) 되었을 때 특정작업을 처리할 코드를 실행시켜주고 싶다면 사용
- 인자로 콜백함수를 받는다. (콜백함수란 다른함수의 인자로 전달된 함수를 의미)
- 콜백함수 내부에 우리가 원하는 작업을 처리할 코드를 작성해주면 된다.
useEffect는 두가지 형태만 알고 있으면 된다
1.
useEffect(() => { 작업.... });
- 인자로 하나의 콜백함수만 받는 것
- 컴포넌트가 렌더링 될때마다 매번 콜백함수가 실행됨
- 컴포넌트가 맨처음 화면에 렌더링될때 한번, 컴포넌트가 다시 렌더링 될때 한번 실행됨
2.
useEffect(() => { 작업....}, [value]);
useEffect(() => { 작업....}, []);
- 첫번재 인자로 콜백함수, 두번째 인자로 배열을 받는 것
- 이 배열을 다른 말로 Dependency array 라고 함
- 매번 렌더링될 때마다 실행되는게 아니라 컴포넌트가 맨 처음 화면에 렌더링이 될 때 배열안에 들어있는 요소의 값이 바뀔때만 실행
- 빈배열을 전달해주면 컴포넌트가 맨 처음 렌더링 될때만 실행
clean Up - 정리
useEffect(() => {
구독...
return () => {
구독해지...
}
}, []);
- 예를들어 구독을 하고 구독을 해지해주는 작업을 clean up 작업이라고 하는데 return 값 안에 실행시켜줄 작업을 넣어주면 됨
- unmount 될 때 실행을 멈춰줌
- 함수를 return 해주면 컴포넌트가 unmount 될 때 혹은 다음 렌더링 시 불릴 useEffect가 실행되기 이전의 함수가 실행된다.
# 예제1
import React, { useEffect, useState } from 'react';
export default function UseEffect() {
const [count, setCount] = useState(1);
const [name, setName] = useState("");
const handleCountUpdate = () => {
setCount(count + 1);
};
const handleInputChange = (e) => {
setName(e.target.value);
};
//렌더링 될때마다 매번 실행됨 - 렌더링 이후
useEffect(() => {
console.log('렌더링 🤞');
});
// 마운팅 + count가 변화할때마다 실행됨
useEffect(() => {
console.log('🍎count 변화');
}, [count]);
// 마운팅 + name이 변경될때마다 실행됨
useEffect(() => {
console.log('✨name 변화');
}, [name]);
// 맨 처음에만 렌더링될때만 실행됨
useEffect(() => {
console.log('마운팅🐇');
}, []);
return (
<div>
<button onClick={handleCountUpdate}>Update</button>
<span>count: {count}</span>
<input type="text" value={name} onChange={handleInputChange}/>
<span>name:{name}</span>
</div>
);
}
# 예제2
import React, { useEffect, useState } from 'react';
import Timer from './component/Timer';
export default function UseEffect() {
const [showTimer , setShowTimer] = useState(false);
return (
<div>
{showTimer && <Timer />}
<button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
</div>
);
}
// Timer component
import React, { useEffect } from 'react';
export default function Timer() {
useEffect(() => {
const timer = setInterval(() => {
console.log('타이머 돌아가는중....');
}, 1000);
return () => {
clearInterval(timer);
console.log('타이머가 종료되었습니다.');
};
}, []);
return (
<div>
<span>타이머를 시작합니다. 콘솔을 보세요!</span>
</div>
);
}
📌 참고
별코딩 | 리액트 훅스 시리즈
'Front-end > React' 카테고리의 다른 글
[React] React Hooks : useMemo (0) | 2023.02.24 |
---|---|
[React] React Hooks : useContext (0) | 2023.02.22 |
[React] React Hooks : useRef (0) | 2023.02.19 |
[React] React Hooks : useState (0) | 2023.02.16 |
[React] 리액트 시작하기 (0) | 2023.02.07 |