TIL 58. React - 컴포넌트 내 코드 실행 순서

useEffect나 useQuery를 쓰면 undefined라면서 랜더링이 되지 않는 경우가 있다.
이제는 왜 안되는지 알게 됐지만, 더 자세히 알아보고자 포스트를 작성한다.

Component Lifecycle

컴포넌트가 브라우저상에 나타나고(Mount) 업데이트 되고(Update) 사라지는(Unmount) 과정

출처: https://twitter.com/dan_abramov/status/981712092611989509

이러한 과정들은 useEffect를 보면 이해하기 쉽다.

useEffect(()=>{
	// componentDidMount (처음 컴포넌트 렌더링된 이후 실행)
	return () => {
	// componentWillUnmount (컴포넌트가 사라지기 직전에 실행)
	}
}, [])

useEffect(()=>{
	// componentDidMount (처음 컴포넌트 렌더링된 이후 실행)
	// componentDidUpdate (변경된 state로 컴포넌트 렌더링된 이후 실행)
}, [state])

useEffect 또는 useQuery등은 페이지가 랜더링 된 후에 읽힌다.
즉, 처음에는 컴포넌트의 위에서 아래로 순서대로 읽어가지만 useEffect등은 건너뛰어서 읽고,
컴포넌트의 retunr이 실행된 후 useEffect등을 포함해서 위에서 부터 아래로 다시 읽기 시작하고 랜더링 하게 된다.