1. React에서의 상태 관리
React로 application 만들 때 필수적으로 상태를 관리하는 상황을 마주치는데 기본적으로 state에 기본 값을 지정하고 setState를 사용하여 data를 추가,제거 그리고 수정한다. 독립적인 component내에서 뿐만 아니라 부모-자식, 부모-자식-자식의 자식- 자식의 자식의 자식, 혹은 그 역순과 사돈/팔촌 관계끼리도 state를 공유하고 수정하고 다시 공유할 수 있다.
state를 props로 서로 넘겨주며 data를 공유하고 setState를 통해 data를 수정하는 등 간단한 방법으로 React에서 상태 관리를 할 수 있지만 application의 규모가 복잡해지고 커질수록 상태 관리는 더욱 더 힘들어진다.
무엇이 이 간단한 방법을 복잡하고 어렵게 만드는지 알아보기 위해선 우선 React의 특성을 알아볼 필요가
있다.
2. React의 렌더링 조건
React의 특성 중 하나인 렌더링 조건을 살펴보면 아래와 같다.
1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate() 를 실행하였을 때
4. 부모 컴포넌트가 렌더링되었을 때
1번, 2번, 4번을 주목해보자.
어플리케이션 속 각각의 컴포넌트들은 props와 state가 변경될 때 그리고 그 컴포넌트의 부모 컴포넌트가 렌더링되었을 때 다시 렌더링이 된다.
자세한 예로 살펴보자.
3 React 특성의 부작용: 불필요한 렌더링
부모 컴포넌트가 렌더링 되었을 때 자식 컴포넌트도 같이 렌더링이된다
이는 프로젝트가 커질 수록 심각한 성능저하를 일으킬 수 있다!
예를 들어 부모 컴포넌트 하나에 자식 컴포넌트가 줄줄이 엄청나게 많다면
부모컴포넌트가 렌더링 될때 자식 컴포넌트는 자식 컴포넌트들은 렌더링이 되었다는 이유로 다시 렌더링이 된다.
이러한 리액트의 단방향 데이터 흐름으로 인한 복잡성과 성능손실을 해결할 수 있도록
Redux를 활용한다
Redux
Redux는 React (뿐만 아니라 다른 라이브러리나 프레임워크)에서 사용 가능한 application 상태관리 library이다. 여러개의 middleware들도 제공하며 대표적으로 logger, thunk, saga, persist 등이 있다.
