강의

멘토링

로드맵

Inflearn brand logo image

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

최동혁님의 프로필 이미지
최동혁

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

10.3) React.memo와 컴포넌트 렌더링 최적화

하이라이트질문

작성

·

62

0

아무리 봐도 껏다켰다 하시는 부분에서

하이라이트가 계속 나오는데 뭐를 보고 하이라이트 표시가 안된다는 건가요?

혹시 제가 하이라이트를 잘못 알고 있는건가 문의드립니다.

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

다음은 10.3 챕터 강의의 2분 4초경에 확인하는 리렌더링 하이라이트입니다.

image.png

자세히 보시면 헤더 컴포넌트의 영역에 하이라이트가 들어오고 있는걸 보실 수 있습니다.

헷갈리신다면 별도로 빨간펜으로 칠해 다시 보여드릴게요

image.png

이렇게 "오늘은" 이라는 텍스트 부터 "Sun Feb 04 2024" 텍스트 아래 까지 하나의 박스 형태로

Header 컴포넌트가 하이라이트 되고 있는걸 확인하실 수 있습니다.

다음은 React.memo 적용 후 Header 컴포넌트가 리렌더링 되지 않는다는 것을 확인하고 있는 화면입니다. 강의중 5분 26초 경을 보시면 됩니다.

image.png

보시면 위 화면에서는 Sun Feb 04 2024 글자 아래에 경계선이 사라져있습니다. 이를 통해 Header 컴포넌트에는 하이라이팅이 발생하지 않는걸 볼 수 있습니다.

최동혁님의 프로필 이미지
최동혁
질문자

죄송합니다. 이해가 안갑니다.

말씀하신대로면

지금 올려주신 두개의 사진에서도

위에거는 경계선이 나오고 아래는 안나와야되는데

 

별도의 경계선은 보이지 않고 주황색? 회색같은 하이라이트만 계속 보이는 것 같습니다

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

우선 전혀 죄송하실 필요 없습니다. 이해가 되실 때 까지 도와드리는게 제 역할이니까요 😀

다만 말씀해주신 내용으로는 현재 상황을 정확히 파악하기 조금 어렵습니다. 이에 혹시 조금 더 구체적인 정보 (브라우저 사진 캡쳐, 전체 프로젝트 링크 등)을 받을 수 있을까요?

참고로 코드를 전달 주실 때에는 모든 파일의 동작을 확인해봐야 하기에 전체 프로젝트를 구글 드라이브 또는 깃허브 등의 링크로 보내주시면 감사하겠습니다.

최동혁님의 프로필 이미지
최동혁

작성한 질문수

질문하기