🤔 React 리렌더링 조건
- 부모 컴포넌트를 리렌더링 할 때
- 부모의 props가 바뀌었을 때
- 자신의
state가 변경되었을 때
이러한 조건일 때 리렌더링하게 되는데 자식의 컴포넌트에서는 변경사항이 없지만 부모 컴포넌트에서 리렌더링일 하게 될 시, 필요하지 않은 부분까지 영향을 주니 성능 저하와 손실을 발생시킨다.
이것을 해결하기 위한 방법들을 알아보자
👉 state 선언부
state가 변경되었을 시에 리렌더링하게 되므로 리렌더링되야하는 부분에만 적용할 수 있도록 선언해준다- 필요없는 최상단에서 props로 타고 내려가지 않아도 되도록
👉 React.useMemo()
- useMemo()란 사용했던 결과의 값을 메모이징하여 재사용하는 것을 말한다(캐싱)
- 연산이 클 때의 경우에는 useMemo()를 사용하여 이미 메모이징되어있다면 리렌더링이 되지 않기에 성능이 좋아진다
👉 React.useCallback()
-
함수는 객체이기에 새로 생성된 함수는 새로운 참조 값을 가진다. 그렇기에 이전에 사용했던 것으로 알지 못하여 메모이징하지 못한다. 그렇기에 useCallback()을 사용하여 리렌더링을 방지할 수 있다.
-
useCallback()은 사용했던 함수를 메모이징하여 재사용한다
-
종속 변수들이 변하지 않는 이상 굳이 함수를 재생성하지 않고 이전에 있던 참조 변수를 그대로 자식 컴포넌트에 전달하여 컴포넌트의 리렌더링을 방지할 수 있다
👉 key를 index가 아닌 unique한 값으로
- 매핑할 때 key가 고유 속성으로 요구가 되는데 key의 값 중간이 바뀌게 되면 전체에 영향을 주게 된다. 그렇기에 단순 렌더링을 제외하고는 unique로 안정적이게 하는 것이 좋다
오늘 하루 마무리 일기를 적어보자면 유튜브보다가 알고리즘이 이산가족상봉으로 날 이끌었다. 그래서 이산가족상봉 영상들보고 또 아빠찾아 삼만리도 보면서 눈물 적신 하루를 보냈다 흑흑.. 스터디 멤버들과 얘기하다가 뭔가 이상함을 느꼈는데 진짜 이산가족상봉인줄 몰랐나보다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ떨어진 데이터 연결 성공하신 걸로 생각하셨다
너무 재밌는 하루였다 끝!
출처: https://velog.io/@shin6403/React-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EB%8A%94-7%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-Hooks-%EA%B8%B0%EC%A4%80
https://jmllog.tistory.com/entry/React%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
