- TeamDetail = 부모컴포넌트
- TeamDetailMemberComponent = 하위 컴포넌트
최초 TeamDetail이 랜더링이 되면 vscode는 TeamDetail의 코드를 위에서부터 아래로 한줄 한줄 읽어내려간다(폭포수)
그럼 콘솔이 찍히는 순서는 A, C가 가장 먼저 찍힌다. 우선 화면이 랜더링이 되는거니까 (A가 부모니까 당연히 먼저찍히는거지)
그 다음으로 D가 찍히게 되는데 그 이유는 부모 컴포넌트에서 map을 돌려서 데이터를 하위 컴포넌트에게 뿌려주고 있기 때문이다.
위 코드에서는 map을 돌리면서 데이터를 던져주고 있는데, 데이터를 한꺼번에 던져주는게 아니라 map을 돌리면서 그 안에 있는 배열의 갯수만큼 던져줘야 하기 때문이다 (1번 데이터를 던져주는데 1번, 2번 던지고 , 3번 던지고…)이렇게 한개한개 던져줄때마다 랜더링이 된다고 생각하자
이 작업이 다 되면 마지막으로 B가 찍히게 된다. 이는 마운트가 됐다는 의미니까.
그럼 왜 아래에 다시 A부터 찍히게 되는걸까. 리엑트의 랜더링 가장 큰 조건은 State가 변하면 랜더링이 되는것이다 즉, 변화가 생기면 랜더링이 된다는 것이기 때문에 이는 다시말해 State가 변할 때마다 랜더링이 일어난다는 소리.
위 코드에서는 param를 기준으로 1번 디테일 페이지에 들어가면(이것 자체가 변화) param에 맞는 데이터를 find로 찾아서 set에 넣어주고 있다.
아까 말한대로 find로 데이터를 찾아서 State에 넣어주는 것도 한번에 넣어주는게 아니라 하나하나 넣어준다는 것이다. 이렇게 state에 변화가 생기니까 한번 한번 리랜더링이 일어나게 된다.
그럼 왜 B는 두 번 찍히지 않는가? 유즈이펙트의 발동 조건은 dependencyList 흔히 댑스라고 잘못 부르고 있는 [] 대괄호 안의 것이다.
즉 대괄호 안에 조건을 넣어주면 이 조건이 변화가 일어나면 useEffect가 리랜더링 시킨다는 것이다.
즉, Deps안에는 :teamId를 바라보고 있다. 메인화면에서 디테일 화면으로 넘어오면서 첫 번째 디테일 페이지(1번페이지)가 랜더링 됐을때 useEffect안의 로직들이 실행이 되는데 첫 화면 랜더링 이후 페이지 변화가 없으니 useEffect의 작동조건에 맞지 않아 실행이 되지 않기 때문이다.
