참고 : https://ko.reactjs.org/docs/hooks-effect.html (공식문서)
useEffect
1. 정의
: 컴포넌트가 렌더링 될 때마다, 특정 작업을 수행하도록 설정할 수 있는 Hook.
2. 기능
: React 컴포넌트에는 일반적으로 두 종류의 side effects가 있다.
-
기능1 - 정리(clean-up)을 이용하는 않는 Effects
: 정리(clean-up)가 필요없는 경우에는 콜백함수에서 어떤 것도 반환하지 않음. -
기능2 - 정리(clean-up)을 이용하는 Effects
: effect에 정리(clean-up)가 필요한 경우에는 콜백함수에서 함수를 반환함.
3. 형태
useEffect(callback, [])
- 첫번째 인자는 콜백함수 : 실행하려는 코드
- 두번째 인자는 배열 : 지켜보려는 값을 배열에 넣음.
🔆 useEffect의 실행시기
- useEffect는 컴포넌트가 실행되고~jsx까지 다 렌더된 후 실행된다.
- 때문에 컴포넌트에 시간이 오래걸리는 연산들이 있다면 html이 렌더될 때 느리게 뜰 수 있다.
- 따라서 useEffect안에 복잡한 연산을 넣어준다면 html이 우선 다 렌더된 후, 나중에 복잡한 연산을 실행할 수 있어서 화면 렌더에 지연이 없다.
🔆 useEffect의 쓰는 경우
useEffect를 쓰면 코드의 실행 시점을 조절할 수 있기 때문에
조금이라도 html 렌더링이 빠른 사이트를 원하면
쓸데없는 것들은 useEffect 안에 넣어 처리할 수 있음.
컴포넌트의 핵심 기능은 html 렌더링이라
그거 외의 쓸데없는 기능들은 useEffect 안에 적으면 됨.
- 시간이 걸리는 어려운 연산
- 서버에서 데이터 가져오는 작업
- 타이머 장착하는 작업(ex. 화면이 다 렌더된 후 2초뒤 alert이 뜬다)
🔶 정리(clean-up)이용하지 않는 Effects
: 정리(clean-up)가 필요없는 경우에는 콜백함수에서 어떤 것도 반환하지 않습니다.
1. 사용
: 원래 state가 변경되면, 컴포넌트는 리렌더링 됨.
: 그러나 state 값이 바뀔때마다 계속 모든 컴포넌트 전체가 리렌더 되는게 아니고,
어떤 "특정 값"이 바뀌었을 때만 리렌더 되도록 선택권을 줄 수 있게됨.
2. 배열에 값을 주지 않으면 - 처음 컴포넌트가 렌더될 때, 한번만 실행됨
- API호출을 딱 한번만 실행되고, 그 뒤로는 다시 실행하기 싫은 경우 활용함.
useEffect(() => {
console.log("only once");
fetch(...)
}, []);3. 배열에 값을 주면 - 해당 값이 업데이트될 때마다 리렌더가 실행됨.
function App() {
const [value, setValue] = useState(0);
const setValueFn = () => setValue((prev) => prev + 1);
const [keyword, setKeyword] = useState("");
const setKeyFn = (e) => setKeyword(e.target.value);
// 1. 항상실행 : 어떤 값이 바뀌든 항상 실행됨.
console.log("always");
/* 2. 빈배열 - 처음 컴포넌트가 렌더될 떄, 한번만 실행됨
빈배열을 주면, react가 지켜볼게 아무것도 없어서 처음 렌더시 한번만 실행됨.
(api호출같이 계속 실행하면 안되는 코드 활용) */
useEffect( () => {console.log("only once")}, []);
// 3. 시작할때랑, value값이 바뀔때만 실행됨.
useEffect(() => console.log("only value"), [value]);
// 4. 시작할때랑, keyword가 바뀌는데 + 글자가 5이상 일때만 실행됨
useEffect(() => {
if ((keyword === "") || (keyword.length >= 5)) {
console.log("only keyword");
}
}, [keyword]);
// 5. 시작할때랑, value 또는 keyword 둘 중 하나가 바뀔때 실행됨.
useEffect(() => console.log("value or keyword"), [value, keyword]);
return (
<div>
//
</div>
);
}🔶 정리(clean-up)를 이용하는 Effects
: effect에 정리(clean-up)가 필요한 경우에는 콜백함수에서 함수를 반환함.
1. 사용
useEffect의 첫번째 인자인 콜백함수에서 함수를 반환하면 cleanup함수로 이용됨.
반환된 cleanup함수는 useEffect를 사용한 해당 컴포넌트가 사라질 때 즉,언마운트 될 때 실행됨.
- 사용1: 기존 타이머 실행을 제거한 후 새로 setTimeOut이 실행하게 할 때.
- 사용2: 기존 데이터 요청은 제거 한 후 새로 api 호출하게 할 때.
2. 예제코드
Other컴포넌트가 렌더될 때 return 이전의 코드만 실행되고,
Other컴포넌트가 사라지고 나면 return 된 cleanup 함수가 실행되는 것임.
import { useState, useEffect } from "react";
function App() {
const [show, setShow] = useState(true);
return (
<>
<button type="button" onClick={() => setShow(!show)}>
토글버튼
</button>
{show ? <Other /> : null}
</>
);
}
function Other({ data }) {
useEffect(() => {
console.log("추가된당");
return () => {
console.log("제거된당");
};
}, []);
return <h1>Other</h1>;
}
export default App;