강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

아리마님의 프로필 이미지
아리마

작성한 질문수

실전 리액트 프로그래밍

리렌더링의 의미를 좀 더 잘 알고 싶습니다.

작성

·

276

0

안녕하세요. 강사님

과거 mvc 패턴으로 개발을 할 떄는 리렌더링에 대한 고민은 한 적이 없었던 거 같은데, SPA 에서는 책이나 강의에서 렌더링 관련된 성능 최적화 내용이 따라오다보니 이 부분이 좀 혼란스럽습니다.

개발을 하면서 컴포넌트마다 console.log 를 남겨서 state 의 변화가 있을 때, 각각의 컴포넌트의 렌더링이 얼마나 일어나는 지 확인을 해볼 때가 있는데요. 값 하나가 바뀔 때, 어떤 컴포넌트는 log 가 5-6개 찍힐 때가 있더라구요.. 그런데 무엇이 이러한 현상을 발생하는 지 찾아 보곤 하는 일이 너무 소모적인 거 같고, 쉽게 찾아지지도 않습니다.

이렇게 여러 번 리렌더링이 발생해도 화면에서 볼 때 전혀 체감이 되지 않는다면 그냥 내버려 두어도 문제되지 않는다고 보면 될런지 아리송합니다. 강사님이 강의에서 일단 성능 신경쓰지말고 개발부터 하고, 추후 성능 이슈가 된다고 판단되면 그때 확인하는 것이 좋다고 말씀해 주셨는데요. log 가 여러번 찍히는 컴포넌트가 있어도 일단은 신경쓰지 않아도 무방할까요? 

답변 2

1

이재승님의 프로필 이미지
이재승
지식공유자

네 리렌더링이 여러 번 발생해도 대부분 문제가 되지 않습니다.
리렌더링은 가상돔 연산(컴포넌트 함수 실행 포함)과 실제돔 변경으로 나눠볼 수 있는데요
여러 컴포넌트 함수에 로그가 많이 찍혀도 대부분 실제돔 변경으로 이어지지 않아서 괜찮습니다.
(보통 가상돔 연산량은 크지 않거든요)

반드시 그런건 아니지만 버튼 클릭과 같이 단발성으로 발생하는 이벤트로 인한 리렌더링은 보통 문제가 되지 않습니다.
드래그나 스크롤과 같이 짧은 시간에 여러 이벤트가 발생하는 경우에 렉이 걸린듯한 현상이 발생할 수 있는데요.
이때 최적화가 필요한 경우가 종종 있습니다.
강의에서도 언급했지만 평소에는 성능 최적화를 안 하시는 것을 추천드립니다.

참고로 StrictMode 를 사용하셨다면 렌더링이 두 번씩 발생하기 때문에 로그가 여러 번 찍힐 수 있습니다.
(하지만 개발 모드에서만 동작하니 너무 걱정하지 않으셔도 되요)

0

아리마님의 프로필 이미지
아리마
질문자

좋은 답변 정말 감사드립니다. 

아리마님의 프로필 이미지
아리마

작성한 질문수

질문하기