React의 State와 Redux의 State 관리

React의 상태란?

컴포넌트 내에서 변경이 가능한 데이터 저장소.

우리가 작성한 코드가 렌더되어 웹페이지에 반영이 될 때,

이 웹페이지 즉 UI에 반영하기 위해 유지시키는 값들의 뭉치이다.

컴포넌트 내의 데이터 저장소, 즉 상태(State)의 변경이 감지되면

자동으로 리렌더링 되어 브라우저의 새로고침을 하지 않아도

변경사항이 바로 UI에 적용된다.

이 때, 상태를 직접 수정하게 된다면 변경을 감지하지 못 하므로

자동으로 리렌더링이 되지 않고, 때문에 실시간으로 UI에 적용되지도 않는다.

때문에 항상 setState() 함수를 사용해서 상태값을 변경해야 한다.

상태는 해당 컴포넌트 내에서만 쓰인다면 해당 컴포넌트 안에서 생성하고 갱신하며 사용하고, 여러 컴포넌트에서 공통적으로 사용하는 상태는 별도의 컴포넌트에서 생성한 뒤

Props로 필요한 컴포넌트에 전달할 수 있는데,

리액트는 하향식(Top-down) 으로 데이터가 흐르기 때문에 간단하게 상위 컴포넌트에서

하위 컴포넌트로 바로 전달해 주거나, 상태 끌어올리기를 이용해 하위 컴포넌트에서 상위 컴포넌트로 전달할 수 있다.

이 방법은 서비스가 크지 않거나, 변경할 상태들의 흐름이 단순할 때는

편리하지만, 그 반대의 경우에는 사용하기 매우 까다롭다.

Redux로 상태 관리하기

위와 같이 상태의 관리가 복잡해질 때,

이 상태 관리를 도와주는 Redux라는 상태관리 라이브러리를 사용한다.

Store, Action, Reducer로 상태를 관리할 수 있는데,

Store에 모든 상태들을 저장,

Action에 상태가 변경될 조건들을 저장 후

Reducer에 넘겨 Store를 업데이트 해준다.

이렇게 되면 모든 컴포넌트에서 Store에 저장된

State를 자유롭게 꺼내서 쓸 수 있고,

Dispatch를 이용해 Action의 조건들을 거쳐

Reducer로 Store를 업데이트, State를 변경시켜준다.

상태의 초기화

리액트의 상태는 렌더링이 되면 초기화 된다.

때문에 상태를 유지시켜 줘야 하는 데이터를 다루기 위해

렌더링이 되어도 변하지 않는 LocalStorage 또는 SessionStorage에 상태를 저장해 관리하는 Redux-Persist를 사용한다.

하지만, 적절한 설정 없이 사용한다면 모든 State들을 Storage에 저장하게 되어

불필요한 Storage 용량 차지가 있으므로,

필요하지 않은 State를 Storage에 저장하지는 않는지 확인하고,

화이트 리스트와 블랙 리스트로 설정해 사용하는 것이 좋다.