🏻 useEffect는 언제 사용할까?
어떠한 컴포넌트가 마운트(화면에 첫 렌더링) 되었을 때, 업데이트(다시 렌더링) 되었을 때, 언마운트(화면에서 사질 때) 되었을 때 특정 작업을 처리할 코드를 실행시켜주고 싶다면 useEffect를 사용하면 됨
🏻 useEffect Hook
useEffect( () => {})
useEffect 훅은 인자로 콜백 함수를 받음.
콜백함수란? 다른 함수의 인자로 전달된 함수를 의미 () => {} 이 콜백함수 내부에 우리가 원하는 작업을 처리해 줄 코드를 작성해주면 됨 () => { 작업... }
🏻 useEffect의 형태
useEffect는 딱 두가지 형태로 쓰여짐
useEffect(()=> {
//작업내용
});- useEffect의 인자로 하나의 콜백 함수만 받는 형태
❗️언제 실행되나요?
- 컴포넌트가 렌더링이 될 때 마다 매번 콜백이 실행 됨 =>
컴포넌트가 맨 처음 실행이 될 때, 컴포넌트가 다시 렌더링 될 때
useEffect(()=> {
//작업내용
},[value]);- useEffect의 첫번째 인자로 콜백 함수, 두번째 인자로는 배열[value]을 받는 형태. 여기서 배열은 다른 말로
dependency array라고도 불림
❗️언제 실행되나요?
- 컴포넌트가 맨 처음 렌더링이 될 때 실행
- 배열 안에 들어가 있는 요소의 값이 바뀔 때만 실행
- 만약 빈 배열 [ ] 만 전달해 준다면? => 컴포넌트가 맨 처음 화면에 렌더링될 때만 실행
🏻 Clean Up 이란?
useEffect(()=> {
//작업 내용 ...
return ()=>{
//작업 해지 ...
}
},[]);useEffect에서 작업 내용을 넣었다면 이후에 내용을 해제해주는 clean up 정리 작업을 해줘야함.
예를들어 타이머 작업을 처리했다면 타이머가 더이상 필요 없을 때 멈추는 정리 작업이나, 이벤트 라스너를 등록 했을 때 등록한 리스너를 정리해주는 작업이 필요함
❗️어떻게 처리하나요?
정리 작업을 처리해주려면 useEffect의 return 값으로 함수를 넣어주면 됨. 이 함수 안에서 우리가 원하는 정리 작업을 처리해줄 수 있음.
❗️언제 실행되나요?
해당 컴포넌트가 언마운트 될 때 혹은 다음 렌더링시 useEffect가 실행되기 전에 함수가 실행이 됨
🏻 코드 보면서 예제로 익혀보기
import './App.css';
import React, { useState, useEffect } from 'react';
function App() {
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>
);
}
export default App;
🏻 Clean Up 예제
import React from 'react';
import { useEffect } from 'react';
export const Timer = (props) => {
//useEffect는 현재 두번 째 인자로 [] 빈 배열을 받고 있기 때문에
//맨 처음 브라우저에 렌더링이 되었을 때만 불리게 됨
useEffect(() => {
const timer = setInterval(() => {
console.log('타이머 돌아가는 중...');
}, 1000);
//return 되는 함수는 정리 작업을 해주는 함수임.
//타이머 컴포넌트가 언마운트 될 때(화면에서 사라질 때) 타이머를 끝내줌
return () => {
clearInterval(timer);
console.log('타이머가 종료됨');
};
}, []);
return (
<div>
<span>타이머를 시작합니다. 콘솔을 보세요</span>
</div>
);
};
.