[Next.js] 리엑트 컴포넌트 코드실행순서

 

componentDidMount, componentDidUpdate, componentWillUnmount는 useEffect에서 실행된다.

componentDidUpdate는 의존성 배열에 따른 업데이트에 해당된다.

componentWillUnmount는 useEffect의 return문에 해당되며 unmount 되기 직전에 실행된다.

 

useEffect의 위치

리턴문 바로 위에 useEffect를 쓰는 것이 좋다. 읽기가 더 편한 구조가 된다.

왜냐하면 랜더링 될 때는 useEffect가 실행되지 않고, 랜더링 후 useEffect가 실행되기 때문이다.

 

처음 랜더링 될 때

처음 랜더링 되면 위에서 아래로 읽으면서 실행시킨다. 이것은 render까지의 과정에 해당된다.

return까지 모두 실행된 직후 useEffect가 실행된다.

 

useEffect 내부에서 실행되는 순서

useEffect 내부에 setState 함수와 console.log가 있으면 동기 함수인 console.log가 먼저 실행된다.

setState 함수는 비동기 함수로서 같은 범위(scope)에서 가장 마지막에 실행이 된다.

비동기 함수이기 때문에 한꺼번에 일괄 처리(배칭처리) 한다.

 

리랜더링 발생

setState함수(useState)가 있다면 실행되면서 리랜더링이 발생한다.

그러면 컴포넌트 최상단부터 다시 읽기 시작한다.

 

언마운트 후 useEffect의 return문

useEffect의 return문은 컴포넌트가 사라질 때(페이지 이동 등) 실행된다.

만약 뒤로가기로 페이지를 이동한다면 update가 아니라 mount 된 것이다.

 

다수의 useEffect가 있을 때

useEffect가 두개가 있고 각각의 의존성 배열이 다른 경우, 처음에는 두개가 하나의 useEffect처럼 실행된다.

즉 내부의 동기 함수를 모두 처리하고 비동기 함수를 처리한다.

 

쿼리가 포함되어있는 경우

쿼리가 내부에 들어가는 경우 처음에는 isLoading이 true가 되고, 데이터는 받아오지 않은 상태다.

return이 모두 실행되어 마운트가 한번 끝난 후 쿼리가 실행된다.

왜냐하면 setState 함수가 쿼리 내부에 내장되어 있기 때문이다.

따라서 쿼리가 들어오면서 다시 랜더링이 시작되어 처음부터 다시 시작된다.

따라서 isLoading은 optional chainning 또는 Loading에 따른 조건 처리를 해야한다.

그러지 않고 map함수로 사용하려고 하면 초반에 undefined 오류가 발생하기 때문이다.