-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
React 인라인 스타일 DOM 업데이트 관련해서 질문드립니다.
21.11.02 23:22 작성 조회수 181
0
안녕하세요?
리렌더링 강의 중에 React의 인라인 스타일 객체가 리렌더링 시 새로 그려진다는 부분에 궁금한 점이 생겨 질문드립니다.
먼저 해당 컴포넌트가 리렌더링 될 때 Element가 인라인 스타일로 할당이 되면 그 자식 요소들도 다시 그려진다고 이해를 했는데요 아래 사진과 같이 테스트를 해봤는데 a가 버튼 클릭 시 바뀔 때마다 리렌더링이 될 때 Form에 인라인스타일을 적용했음에도 a를 사용하는 div이외에는 다시 그려지지 않는 것을 개발자도구로 확인을 했습니다. 혹시 제가 잘 못 이해한 부분이 있나요?
감사합니다.
답변을 작성해보세요.
0
조현영
지식공유자2021.11.03
리렌더링되는 것과 화면에 다시 그려지는 것은 다릅니다. Form은 인라인 객체 스타일을 주었기 때문에 NicknameEditForm을 리렌더링할 때마다 반드시 다시 리렌더링됩니다. Form이 PureComponent이더라도요. 리렌더링 후에는 실제로 변경사항이 없어서 화면을 다시 그리지는 않을 겁니다.
https://reactjs.org/docs/faq-styling.html#are-inline-styles-bad
POMs
질문자2021.11.03
그러면 컴포넌트 생명주기로 봤을 때 updating 과정이 실행되고shouldComponentUpdate 이후에 render함수가 호출이 되고 Virtual DOM 비교 후에 변경된 부분이 없어서 다시 그려지지 않는게 맞는 과정인가요?
만역에 스타일드컴포넌트나 React.memo를 사용하면 생명주기 중 어느 단계에서 update가 멈추나요?
POMs
질문자2021.11.03
그러면 버튼 눌렀을 때 Form의 style이 useMemo로 객체가 관리되어도 Form 전체가 리렌더링 된다고 화면엔 아래와 같이 표시가 되는데 왜 그런걸까요? 
조현영
지식공유자2021.11.03
NickNameEditForm 전체가 리렌더링되는 거 아닌가요? 하이라이트 찍어보는 것보다 Form 안에 console.log 찍어서 해보는 게 사실 더 정확하긴 합니다.
답변 1