[React] React의 라이프사이클 이해하기 (with useEffect)

워네·2022년 5월 18일
0

❄️ React

목록 보기
7/7
post-thumbnail

📌 React의 라이프사이클 이해하기 (with useEffect)

state가 업데이트될 때 마다 렌더링이 새롭게 된다고 했는데 만약 아래와 같이 컴포넌트가 맨 처음 렌더링될 때 state를 업데이트하는 상황이면 어떻게 될까?

function Component(){
	const [time, setTime] = useState(0); //1. state를 만듭니다.
	setTime(time+1);
	console.log('Rendering이 됩니다!');
	return <h3>{time}</h3> 
}

아래와 같은 에러가 뜬다. 이유는 state가 변경되면서 컴포넌트가 다시 렌더링되는데 그러면 state 변경 코드가 실행되고 또 컴포넌트가 렌더링된다. 이게 무한 반복으로 동작하면서 아래와 같이 에러가 발생한다. ![](https://velog.velcdn.com/images/dnjsp/post/7eba7a50-296e-40d2-89e1-f31f7c3803d1/image.png)

그래서 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이라고 부른다.
profile
front-end developer 🐣

0개의 댓글