React | React의 상태

React

목차

1. 상태의 불변성이 중요한 이유
   기존 state의 불변성을 지켜주어야만, 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행되기 때문에 불변성 유지가 필요함
2. 리렌더링 조건
   크게 3가지가 있는데,
   1. props가 바뀔 때,
   2. state가 setState를 통해 변경될 때,
   3. 부모 컴포넌트가 리렌더링될 때. 가 있고
   그 외에도 shouldComponentUpdate에서 true가 반환될 때나 foceUpdate을 통해 강제 렌더링을 시도하는 방법이 있다.

1. 상태의 불변성이 중요한 이유

• 불변성 : 메모리 영역에서의 직접적인 변경을 하지 않고, 기존의 값을 수정하지 않으면서 새로운 값을 만들어내는 것
• 기존 state의 불변성을 지켜주어야만, 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행되기 때문
• 객체는 실제 데이터 값이 아닌 참조 값을 가지기 때문에 복사하여 동일한 참조 값을 가지는 객체 중 하나라도 변경된다면, 모든 객체의 내부 값이 변경될 것임
  1. 얕은 비교를 통해 상태 변화를 감지하기 때문 ← 참조값이 동일하면 요소가 바뀌어도 감지되지 않음
  2. 컴포넌트 성능 최적화 작업을 위함 ← ex. React.memo를 통한 최적화

2. 리렌더링 조건

1. props가 바뀔 때
2. state가 바뀔 때 - setState() 메서드를 이용한 변경
3. 부모 컴포넌트가 리렌더링될 때 : 부모 컴포넌트가 리렌더링 → 자식 컴포넌트도 순차적으로 리렌더링
4. shouldComponentUpdate에서 true가 반환될 때 : 각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있는데 이는 state가 병경되거나 새로운 props를 전달받는경우 실행이 됨(return value를 false로 지정할 경우 → 리렌더링 X)
5. this.forceUpdate로 강제로 렌더링을 트리거할 때 - props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶을 때 사용하는 메소드

---

출처

상태의 불변성이 중요한 이유
불변성
리렌더링 조건