state가 업데이트될 때 마다 렌더링이 새롭게 된다고 했는데 만약 아래와 같이 컴포넌트가 맨 처음 렌더링될 때 state를 업데이트하는 상황이면 어떻게 될까?
function Component(){
const [time, setTime] = useState(0); //1. state를 만듭니다.
setTime(time+1);
console.log('Rendering이 됩니다!');
return <h3>{time}</h3>
}
그래서 React에서는 렌더링하는 것을 제어할 수 있는 장치로 useEffect
라는 메소드를 제공해준다.
useEffect(function, [ 모니터링 대상])
의 형태로 사용한다.
useEffect의 두 번째 인자에 들어가는 변수가 변경될 때마다 useEffect 안의 함수가 재실행된다. 만일 값이 없다면 딱 한 번만 실행되고 더 이상 실행되지 않는다.
//useEffect의 두 번째 인자(배열)에 값이 없으면 딱 한 번만 로딩되고 실행되지 않는다.
function ComponentOnlyOnce(){
const [time, setTime] = React.useState(0);
React.useEffect(() => {
setTime(time+1); //state를 바꿔서 또 렌더링이 되더라도 setTime은 호출되지 않는다.
console.log('컴포넌트가 화면에 처음 렌더링될 때 딱 한 번 실행됩니다.');
}, []);
}
//아래와 같이 하면 안 된다.
function DontDoThisComponent(){
const [time, setTime] = React.useState(0);
React.useEffect(() => {
setTime(time+1); //state인 time을 업데이트하면 useEffect안의 함수가 또 실행된다.
console.log('time이 바뀔 때마다 계속 업데이트됩니다.');
}, [time]); //time이 업데이트 될때마다 함수가 실행된다.
}
💡 React에서 제공하는 useState, useEffect 같은 메소드를 Hook이라고 부른다.