LearnFit
YouTube, How to use memo in React to Optimize Renders
[React - 요약] React.memo를 활용하여 컴포넌트 렌더링을 최적화하는 법
#전체
#개발자
#프론트엔드
#memo
#React
#react.memo
#React to Optimize Renders
#Optimize Renders
#memo in React
#memo react
#react memo
00:00영상 개요: React.memo를 통해 리액트 컴포넌트의 렌더링 횟수를 최적화하는 방법을 다루는 영상입니다.
00:00*영상과 관련 없는 React.memo에 대한 배경지식들입니다. 만약 React.memo에 대해 익숙하지 않으시다면 해당 노트는 나중에 읽으시거나 skip해주세요.
배경지식 1:
React.memo는 prop이 바뀌지 않으면 컴포넌트를 re-rendering 시키지 않게 합니다.(re-rendering의 조건: state가 바뀌거나, 부모로부터 받는 prop이 바뀌거나 등)
배경지식 2:
React.memo()를 사용하기 가장 좋은 케이스는 함수형 컴퍼넌트가 같은 props로 자주 렌더링 될거라 예상될 때 입니다.
출처: https://ui.toast.com/weekly-pick/ko_20190731
배경지식 3:
렌더링 최적화 하지 않을 컴포넌트에 React.memo 를 사용하는것은, 불필요한 props 비교만 하는 것이기 때문에 실제로 렌더링을 방지할수있는 상황이 있는 경우에만 사용하시길바랍니다.
출처: https://react.vlpt.us/basic/19-React.memo.html
배경지식 4:
얕은 비교(shallow comparison)란 간단히 말하자면 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조인지(동일한 메모리 값을 사용하는지)를 비교하는 것을 뜻한다. 객체(object), 배열(array), 함수(function)와 같은 객체들은 같은 참조 값이 아니라면 새로운 값으로 판단하는 것이다.
00:29App 컴포넌트 소개
00:47Count 컴포넌트 소개
01:18아무것도 수정하지 않은 코드의 rendering 방식
02:12React.memo를 Count 컴포넌트에 적용
02:43React.memo를 적용한 뒤 rendering 방식 확인(prop 전달 없음)
03:27좀 더 복잡한 방식(Count에 prop 전달)
05:04prop(함수) 전달로 인해 다시 바뀐 rendering 방식
05:56React.memo를 위한 prop 전달 최적화(useCallback 사용)
06:21최적화 이후 rendering 방식 확인
06:37prop(객체) 전달로 인해 다시 바뀐 rendering 방식
07:06React.memo에 두 번째 인자 전달로 rendering 최적화하기
08:42전역 변수 선언으로 rendering 최적화하기
08:56React.memo를 위한 prop 전달 최적화(useMemo 사용)
09:44질문: App 컴포넌트의 text2 state를 useMemo의 dependancy array에 넣으면 어떻게 될까?
정답: text2의 update가 data를 다시 만들기 때문에(useMemo의 dependancy array 이므로) Count 컴포넌트도 매번 다시 렌더링 됩니다! text2 input field에 텍스트를 입력할때마다 Count 컴포넌트가 다시 렌더링 되는 이유!
11:14useMemo, useCallback 사용할 때 인지해야하는 포인트
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기