inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

componentDidUpdate 관련 질문

해결된 질문

582

sohee

작성한 질문수 6

0

Snipaste_2023-07-07_15-34-15.png3개의 배열 메세지 모두 동일하게 map함수로 돌리고 화면에 출력하였는데, 1 didupdate call만 두 번 콘솔에 찍히고 3번 didupdate call는 콘솔에 안 찍히는 이유가 궁금합니다

HTML/CSS javascript react

답변 1

0

Inje Lee (소플)

안녕하세요, 소플입니다.

 

처음 1번이 마운트(Mount) 된 시점에서 2번이 마운트 될 때,

재렌더링이 일어나면서 기존에 마운트 되어 있던 1번이 업데이트 됩니다.

 

그리고 1, 2번이 마운트 된 시점에서 3번이 마운트 될 때,

재렌더링이 일어나면서 기존에 마운트 되어 있던 1, 2번이 업데이트 됩니다.

 

그리고 1, 2, 3번이 모두 마운트 된 이후에는 따로 재렌더링이 일어나지 않고,

바로 모든 컴포넌트를 언마운트 시키기 때문에 1, 2, 3번의 언마운트(Unmount) 로그가 찍히는 것입니다.

 

이 흐름을 잘 이해한 이후에 다시 한 번 코드와 로그를 살펴보시기 바랍니다!

감사합니다.

0

sohee

그러면 혹시 배열이 4번까지 있게 되는 경우에는 1번이 마운드 되고 2번이 마운트 될 때 1번이 업데이트 되고 이번이 마운트 되고 3번이 마운트 될 때 1번과 2번이 업데이트 되고 3번이 마운트 된 후에 또 4번이 마운트 될 때 1,2,3번이 업데이트 되고 4번이 마운트 된 후에 1.2.3.4가 언마운트 되게 되는건가요?

0

Inje Lee (소플)

네, 맞습니다~!

직접 코드에 아이템을 하나 더 넣어서도 확인해보시면 좋을 것 같습니다.

감사합니다.

강의가 삭제되었다고 합니다

0

111

1

이거 왜 존재하지 않는다고 뜨는건가요

0

138

1

존재하지 않는 수업이라고 떠요

0

184

1

안드로이드 에뮬레이터 오류

0

101

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

130

1

prevIsConfiromed 질문

1

144

2

chapter14 잘이해가 되지않습니다..

1

136

2

2025년 3월 리액트버전

1

205

2

npm 설치 오류

1

178

1

chapter_07 콘솔로그 질문드려요~!

1

129

2

안녕하세요 미니블로그 실습 질문드립니다.

1

179

3

에러가 떠요

1

220

3

Chapter6 질문 드립니다

1

210

2

실습 코드 있을까요?

1

208

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

234

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

310

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

142

1

버튼이 안 뜹니다

0

305

2

npx create-react-app my-app

1

472

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

377

3

Chapter_05 터미널, 리액트 에러

0

194

2

npx create-react-app my-app 명령어 반응없음

1

434

3

import 코드 에러

1

215

1

백틱

1

122

1