1. State 변경
React에서는 state가 변경되면 새로이 렌더링을 시작한다.
그러나 단순히 state의 변경만으로는 리렌더링이 발생하지 않고 class 컴포넌트의 setState() 메소드 또는 useState Hook의 setter 함수가 동작되었을 때만 발생한다.
state는 동일한 값으로 변경되어도 리렌더링이 발생한다.
state 값이 true일 때, true로 변경을 시도하더라도 리렌더링이 발생하게 된다.
2. Props 변경
부모 컴포넌트에서 전달받은 Props의 값이 업데이트 되었다면 해당 컴포넌트는 리렌더링된다.
props는 동일한 값으로 변경되어도 리렌더링이 발생한다.
그러나 React.memo를 이용하여 컴포넌트를 메모이제이션하여 동일한 props로 컴포넌트가 호출될 때 이전 렌더링 결과를 재사용하는 방법으로 리렌더링을 방지할 수 있다.
3. 부모 컴포넌트 리렌더링
부모 컴포넌트가 리렌더링이 되면, 자식 컴포넌트들도 전부 리렌더링된다.
하지만 shouldComponentUpdate, React.memo, useMemo 등의 최적화 기법을 사용하면 자식 컴포넌트의 리렌더링을 방지할 수 있다.
위 최적화 기법들은 React 내부의 가상 DOM 트리 비교 과정인 재조정(reconciliation) 단계를 생략하는 방법입니다.
위 방법은 리렌더링 비용을 줄이는 효과를 얻을 수 있지만, 메모리를 추가적으로 사용하는 비용이 들기 때문에 반드시 성능 향상을 보장하지는 않는다.
4. Context 변경
React Context API를 사용할 때, context의 값이 업데이트되면 context를 구독하고 있는 모든 컴포넌트가 리렌더링된다.
5. forceUpdate 메소드 호출
class형 컴포넌트에서 사용하는 메소드로 강제적인 리렌더링을 동작시키는 메소드를 호출하는 방법이다.
그러나 강제적으로 리렌더링을 동작시키는 것은 지양해야한다.
6. shouldComponentUpdate
class 컴포넌트에서 사용하는 메소드이다.
컴포넌트에서 state가 변경되거나 새로운 props를 전달받았을 때 실행이 되며 기본값으로 true를 반환한다.
true가 반환되면 render() 함수가 호출되어 리렌더링이 발생하고, 메소드의 반환값을 false로 변경하면 state와 props에 의한 리렌더링을 제한할 수 있다.