1. useEffect?
- React Hook의 한 종류, side effect를 처리하기 위하여 사용한다.
- useState처럼 state 변경이 감지되면 리렌더링을 하는 사이드 이펙트를 처리하기 위하여 사용한다.
- 리랜더링과 무관한 작업, 데이터 비동기 호출 등의 기능을 구현할 때 사용한다.
- ** useEffect는 콜백함수와 deps가 있던 없던, 랜더링 된 후 최초 1번만 실행된다.
2. 사용법과 동작방식
- 콜백함수와 deps가 모두 있을 때
useEffect(()=>{.. }, deps)> deps(=의존성 배열)의 값이 변경될 때를 감지하여, 콜백함수를 실행한다.
- deps가 없을 때
useEffect(()=>{.. })> 모든 변경을 감지하여 실행한다.
- deps가 빈 배열 [] 일때
useEffect(()=>{.. }, [])> 한번만 실행되고, 그 이후 전혀 실행되지 않음.
3. 예제
import "./App.css";
import Viewer from "./components/Viewer";
import Controller from "./components/Controller";
import { useEffect, useState } from "react";
function App() {
const [count, setCount] = useState(0);
const [input, setInput] = useState("");
useEffect(() => {
console.log(`count: ${count} / input: ${input}`);
}, [count, input]); // 의존성 배열, deps(=dependency array)
const onClickButton = (value) => {
setCount(count + value);
console.log(count); // 이전의 값이 출력되므로 여기다가 사용하면 안됨, useEffect를 통해서 변경된 스테이트 값을 이용해야함
};
return (
<div className="App">
<h1>Simple Counter</h1>
<section>
<input value={input} onChange={(e)=>{
setInput(e.target.value);
}} />
</section>
<section>
<Viewer count={count} />
</section>
<section>
<Controller onClickButton={onClickButton} />
</section>
</div>
);
}
export default App;
