렌더링시 두번씩 반복 됩니다.
1181
작성한 질문수 1
shouldComponentUpdate 기능 구현하기전부터 콘솔 로그확인시 두번씩 반복되는 것을 확인할수있는데, 적용후에도 동일하게 나타납니다. 어떤 문제인지 잘 파악이 되지않아 해당 화면 첨부드립니다. 
확인부탁드리겠습니다. 감사합니다.
답변 6
0
렌더링 단계는 render 함수를 호출해서 이전 렌더와 비교를 수행하는 단계이고, 커밋 단계의 경우에는 라이프 사이클 함수를 실행시키며 DOM 노드를 추가/변경해주는 단계입니다. 여기서 커밋단계는 일반적으로 렌더링 단계보다 빠릅니다.
그로인해 느린 렌더링 단계에서 여러 생명주기 메서드가 여러번 호출되기도 합니다. 이러한 것들을 strict 모드에서는 미리 파악하고 우리에게 경고해줍니다.
strict 모드가 자동적으로 모든 부작용을 찾아낼 수는 없지만, 문제가 될 만한 함수를 두 번 실행하는 방법으로써 이러한 발견을 도와줍니다. 즉 Double-Invoke 방식을 통해 이를 우리에게 알려주는 것입니다.
참고로 주로 double-invoked가 발생하는 함수는 다음과 같습니다.
클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate
클래스 컴포넌트의 getDrivedStateFromProps static 메서드, 함수 컴포넌트 바디
State updater 함수(setState 의 첫 번째 인자)
useState, useMemo, useReducer 에 전달되는 함수
출처 : react 공홈-Strict mode
key is not a prop 에러에 대하여
0
697
1
App.js에서 handleCreate 함수 생성 시 오류
0
463
1
PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?
0
406
1
firebase에서 db 데이터 값 가져오기 중...
0
532
1
강의 교재 받을 수 있나요?
0
438
0
라이프사이클 관련 질문
0
289
0
onClick = {smoe callback} 은 render 를 다시 호출 하나요?
0
225
0
동영상 하단에 링크가 없어요
0
314
0
var를 사용안한다 하셨는데
0
411
1
수강자료는 어디서 받나요
1
584
1
영상 링크가 변경된 것 같습니다.
10
440
0
계속 보고있지만 구동되는 방향성을 이해못하겠어요 ㅠㅠ.
0
280
0
리액트 virtualDOM 개념과 state 불변성 관련 개념이 어떻게 다른건지 궁금합니다.
0
229
0
npm 을 사용해서 create 하려니까 안되네요
0
262
0
배열안의 데이터 수정하기에서 12:19 화면 부분이 궁금해서 질문드립니다.
0
229
0
계속 PhoneForm.js 파일을 못읽는거같더니
1
267
0
this에 관해서 질문드립니다!!
0
334
1
배열 데이터 렌더링 및 관리파트에서 props로 값 가져올때 질문있습니다!
0
218
0
함수형 컴포넌트는 state를 어떤 식으로 정의하는지 궁금합니다.
0
417
1
ㅇ
0
343
1
import 질문
0
292
2
index.js 파일이 다릅니다
2
224
0
const {변수명} = ? 표현법
1
2862
1
create-react-app 오류 (Cannot find module './encoding/utf8')
0
277
0