리액트 컴포넌트 코드 실행순서

서버사이드에서 componentDidMount , componentDidUpdate, componentWillUnmmout가 실행됌

 

 

1. 먼저 랜더링이 된다(jsx의 리턴이 발동)

2. console.log("컴포넌트디드마운트") -> console.log("비동기테스트") 실행

3. set함수 실행 => state 변경이 일어나니 다시 '리랜더링'이 일어난다.

*랜더링이 된다? 컴포넌트 최상단부터 다시 읽기 시작한다는 것

 ?? 리랜더링이 되었을땐, state 값이 바뀐 상태이니 리액트가 알아서 '응 바뀐거없구나' 하고 건너뛰어 또 리랜더링이 안일어나는게 맞나?

 

리랜더링 과정에서는 useEffect를 점프하고 넘어가서 리턴부분만 실행한다. 

 

4. state변경함수들은 '비동기'함수인데 , 비동기 함수 특징은 같은 scope내에서 마지막에 실행이 된다는 특징이 있기 때문

맨 마지막에 set함수들이 한번에 실행이 된다 =>batching (한꺼번에 일괄처리한다)

리액트에서 state변경을 배칭처리한다라고 표현함

 

하나씩 각각 state변경 및 리랜더링을 하지 않고, 마트가서 장 한번에 보듯이

모든 state 변경함수들을 모았다가 한번에 state변경을 시킨후 한번만 리랜더링을 하는 것

 

 

 

 

 

*** 리턴문 바로 위에 useEffect를 써주는게 좋다

이유 : 리턴문이 끝난 직후에 읽히는 부분이 useEffect이기 때문

??? 왱???

 

 

 

처음에 마운트되었을때, 14번라인의 data가 undefined가 찍히는데

useQuery의 getNowPlaying이 바로 실행이 되지 않는다. 

한번 랜더가 일어난 이후에, 사이드 이팩트처럼 그 다음  getNowPlaying이 실행되고 api호출이 일어난다.

useQuery안에 state 변경 함수가 내장이 되어있고, data state가 변경이 이루어지고 다시 '리랜더링'이 된당!!

 

 

따라서?

예를 들어 서버에서 data를 받아와서 map으로 뿌리고 싶을땐

처음부터 data.map 이렇게 리턴문에서 돌리면 당연히 데이터가 처음에 안받아와져지니 에러가 날 것이고

옵셔널체이닝으로 data?.map 요렇게 예외처리를 해주기 ㅇ_<