props를 활용하면서 발생하는 렌더링 문제(성능저하) 해결하는 방법!
🔆 PureComponent를 사용하는 습관 가지기!
shouldComponentUpdate()
state 또는 props가 변경되는 경우에만 렌더링이 발생하는데,
렌더링될 필요가 없는 다른 컴포넌트가 다시 렌더링이 되면서 성능 문제가 발생할 수 있다.
setState를 통해 state가 바뀌지 않고 setState를 호출만 하는 경우에도 렌더링이 발생된다.
shouldComponentUpdate()를 사용해 어떤 경우에 렌더링할지 직접 작성해준다.
- true를 리턴하는 경우: 렌더링이 발생
- false를 리턴하는 경우 : 렌더링이 발생하지 않음
PureComponent
Component 대신 PureComponent를 import하면 shouldComponentUpdate를 알아서 구현한 컴포넌트로 쉽게 사용할 수 있다.
state가 변경되었는지를 파악하고 true, false를 알아서 return 해준다.
다만, 객체 또는 배열 형태인 state는 변경되었는지 감지를 잘하지 못하는 단점이 있다.
옛날 객체나 배열을 가져와 state를 변경하면 안된다.
💡 불변성의 법칙에 따라 새로운 객체나 배열을 만들어 state가 바뀌었다는 것을 알아차릴 수 있도록 해야 한다!
// 예시
this.setState({
array: [...this.state.array, 1], // 옛날 state를 펴서 만들기
});
// 잘못된 예시
this.state.array.push(1);📌 원하는 경우에만 렌더링하고 싶은 경우, 컴포넌트를 분리하여 잘게 쪼개서 PureComponent를 사용하는 것을 추천한다.
React.memo
함수형 컴포넌트에서 React.memo Hooks를 이용해 state, props가 변경된 경우에만 렌더링하여 성능 최적화한다.
사용하는 방법은 구조분해할당한 자식 컴포넌트를 memo로 감싸주면 된다.
⁕ 출처: Youtube_Zerocho React 기본 강좌
