React : 쓸데없는 재렌더링을 막는 memo

정지원·2021년 10월 24일
0

react

목록 보기
19/27
post-thumbnail

먼저 예시용 컴포넌트를 3개 만들어보자
부모 컴포넌트와 자식 컴포넌트 2개이다
부모 컴포넌트에는 이름과 나이값을 넣어주고
자식들에게 props를 주게되면 자식들은 그 값을 props로 물려받을수 있다

근데 갑자기 이름(데이터)을 바꾼다면?

이렇게 변하지 않을까? 이건 아주 기초적이니 바로 알수있다.
이게 무슨말이냐면 ! 우리가 아까 이름을 존박에서 존박1로 바꿨는데
그렇게 바꾸게 되면, 데이터바인딩을 하고있는 state나 props가 바뀌게 되면 ! 항상 그 안에있는 div들은 전부 재렌더링이 된다 !

우리는 이름만 바꿨는데 전부 재렌더링되면 조금 비효율적이지 않을까? 이런걸 막기위한 신문법을 알아보겠다

useMemo()

이건 약간 말 그대로 "내가 이 props, states는 기억해둘게 ~" 라는거다

like this !

memo를 import 해주고 ! 컴포넌트를 살짝 변경해주자
변수만드는것부터 시작하고, memo()라는 함수안에 함수를 만들어주자 그러면 이제 memo로 감싸진 함수들은 컴포넌트와 관련된 props가 변경이 될 때만 재렌더링이 됨 ! props가 양이 엄청많다면,, 또한 느려질수도 있기 때문에
양이 아닌 컴포넌트의 크기가 클때 사용해주면 적절하다

profile
강의보며 공부하고, 개인/팀 프로젝트 준비하는 개발일지 입니다;

0개의 댓글