Day 32.

wisdomdom·2022년 2월 28일
0

메모이제이션은 컴퓨터 과학에서도 쓰이는 용어

컴포넌트가 실행될 때 안에 있는 내용이 싸악 그려진다.


use로 시작하는 것은 기록되어있지만, 나머지는 렌더링이 되면서 초기화된다.

부모컴포넌트가 새로 그려지면 자식 컴포넌트도 다시그려진다 —> 너~무 비효율

어떻게 최적화할것인가,, 그 전에

React Developer Tools - 개발자도구(profiler) - settings

컴포넌트가 렌더링되는 영역일 때 표시해줘~
렌더링이 많이 되면 노란색됨

-> 렌더링 되는 부분


렌더링 녹화

어떻게 하면 자식컴포넌트를 렌더링을 안할까!


자식 컴포넌트를 memo로 감싸주기!


이제 프리젠터 렌더링 안됨

컴포넌트를 여러개 사용하면 (서비스가 커지면) 효율이 떨어지니까 memo 기능을 잘 사용하자

Memo -> 컴포넌트 기억
useMemo -> 변수 기억
useCallback -> 함수 기억

컴포넌트 뿐 아니라 함수도 새롭게 실행된다

렌더링될때마다 컴퓨터 저장공간에 들어오기 때문에 비효율적이다

재생산을 막자!! -> useMemo, useCallback

const aaa = useMemo(()=> { 리턴을 기억 }, [])

-> useEffect처럼 쓴다


근데 useMemo는 거의 안쓴다 let 어쩌구~ 이건 거의 쓸 일 이 없어서…
언제 쓰는게 좋냐면~ 엄청나게 복잡한 수학적인 계산을 변수에 담았을때 쓰면 좋다 -> 복잡한 계산을 다시 안해도 되니까!

state에다가 useCallback 을 직접 적용하면 안되고


countLet도 useMemo처리

-> 이제 렌더링 되는 부분은 1,2,3

useMemo은 변수(값)를 기억하는데 ?? 값이 함수라면

useMemo로 useCallback 만들어보기! (그냥 만들어봄, 잘 안쓴다!)

다시 프리젠터로 넘어가서, memo 기능을 쓰면 항상 리렌더가 안될까?


넘기는 값이 있고, 값이 바뀌면 리렌더 된다!

useCallback, memo (react-memo)는 많이 쓰니까 포폴에 많이 써보자!

렌더링 비교

[ 라이브러리 추천 ]

  1. Apollo Client Devtools

connectToDevTools: true

  1. Wappalyzer - Technology profiler

: 특정 사이트에 들어가면 무슨 기술을 썼는지 보여준다

How it works
Go to any website
Click the icon for a list of identified technologies
Click on a technology or category for more insights


브라우저 말고 사파리에서 작동되는지 확인해주는 폴리필

profile
가보자고~

0개의 댓글