Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다.
React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은
목적으로 제공되지만, 하나의 API로 통합된 것입니다.
예를 들어,
ex) 버튼을 누르면 색갈이 바뀌는
import { useState, useEffect } from "react";
import "./App.css";
export default function FunctionComponent() {
const [color, setColor] = useState();
const changeColor = (color) => {
setColor(color);
};
useEffect(() => {
console.log("컴포넌트가 마운트 되었습니다.");
}, []);
useEffect(() => {
console.log("컴포넌트가 마운트 되었습니다.");
}, [color]);
return (
<div>
<div
style={{
width: "200px",
height: "100px",
margin: "auto",
backgroundColor: color,
border: "solid 1px black",
}}
></div>
<div>
<button className="button" onClick={() => changeColor("red")}>
빨간색
</button>
<button className="button" onClick={() => changeColor("blue")}>
파란색
</button>
<button className="button" onClick={() => changeColor("green")}>
초록색
</button>
<button className="button" onClick={() => changeColor("black")}>
검은색
</button>
</div>
</div>
);
}
지금의 코드로 useEffect를 설명해보자면
일단 useEffect에 console.log를 찍어 확인해보면
색갈을 바꿀때마다(페이지가 랜더링 될때마다)
컴퍼넌트의 숫자가 오르는것을 확인할수 있다.
그 뜻은 useEffect가 console.log를 실행시키고 있다.
useEffect(() => {
console.log("컴포넌트가 마운트 되었습니다.");
}, []);
그때 [] 빈 대괄호를 파리미터를 넣어주면 된다.
뜻은 이 페이지가 처음 한번만 실행해줘
useEffect(() => {
console.log("컴포넌트가 마운트 되었습니다.");
}, [color]);
color라는 변수에 변화가 있을때만 안에있는 코드를 실행할수있게 만들수 있다.
만약 age, height 등등. 자기가 원하는 변수를 넣어서 사용할수 있다.
즉. 맨 처음 위에 설명한
componentDidMount,
componentDidUpdate,
componentWillUnmount와 똑같은 뜻이다.
.button {
margin: 20px auto;
display: flex;
justify-content: center;
color: rgb(0, 0, 0);
border: none;
border-radius: 5px;
height: 40px;
width: 140px;
}