React 인라인 스타일 DOM 업데이트 관련해서 질문드립니다.
298
작성한 질문수 4
안녕하세요?
리렌더링 강의 중에 React의 인라인 스타일 객체가 리렌더링 시 새로 그려진다는 부분에 궁금한 점이 생겨 질문드립니다.
먼저 해당 컴포넌트가 리렌더링 될 때 Element가 인라인 스타일로 할당이 되면 그 자식 요소들도 다시 그려진다고 이해를 했는데요 아래 사진과 같이 테스트를 해봤는데 a가 버튼 클릭 시 바뀔 때마다 리렌더링이 될 때 Form에 인라인스타일을 적용했음에도 a를 사용하는 div이외에는 다시 그려지지 않는 것을 개발자도구로 확인을 했습니다. 혹시 제가 잘 못 이해한 부분이 있나요?
감사합니다.
답변 1
0
리렌더링되는 것과 화면에 다시 그려지는 것은 다릅니다. Form은 인라인 객체 스타일을 주었기 때문에 NicknameEditForm을 리렌더링할 때마다 반드시 다시 리렌더링됩니다. Form이 PureComponent이더라도요. 리렌더링 후에는 실제로 변경사항이 없어서 화면을 다시 그리지는 않을 겁니다.
https://reactjs.org/docs/faq-styling.html#are-inline-styles-bad
0
그러면 컴포넌트 생명주기로 봤을 때 updating 과정이 실행되고shouldComponentUpdate 이후에 render함수가 호출이 되고 Virtual DOM 비교 후에 변경된 부분이 없어서 다시 그려지지 않는게 맞는 과정인가요?
만역에 스타일드컴포넌트나 React.memo를 사용하면 생명주기 중 어느 단계에서 update가 멈추나요?
0
NickNameEditForm 전체가 리렌더링되는 거 아닌가요? 하이라이트 찍어보는 것보다 Form 안에 console.log 찍어서 해보는 게 사실 더 정확하긴 합니다.
넥스트 버젼 질문
0
78
2
로그인시 401 Unauthorized 오류가 뜹니다
0
90
1
무한 스크롤 중 스크롤 튐 현상
0
176
1
특정 페이지 접근을 막고 싶을 때
0
103
2
createGlobalStyle의 위치와 영향범위
0
96
2
인라인 스타일 리렌더링 관련
0
92
2
vsc 에서 npm init 설치시 오류
0
147
2
nextjs 15버전 사용 가능할까요?
0
160
1
화면 새로고침 문의
0
121
1
RTK에서 draft, state 차이가 있나요?
0
153
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
349
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
375
1
sudo certbot --nginx 에러
0
1278
2
Minified React error 콘솔에러 (hydrate)
0
470
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
247
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
328
1
npm run build 에러
0
519
1
front 서버 npm run build 중에 발생한 에러들
0
382
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
338
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
288
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
240
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
202
1