일반적인 웹 환경에서는 페이지 새로고침이 발생하면 JavaScript 컨텍스트가 완전히 초기화된다. 따라서 이전 상태를 유지하려면 파라미터, 세션, 폼 데이터 등의 별도 메커니즘을 통해 서버나 클라이언트 측에 저장하고 다시 불러와야 한다.
반면 React는 SPA(Single Page Application) 구조를 지향하며, 페이지 전체를 새로고침하는 대신 필요한 부분만 효율적으로 업데이트하는 것을 목표로 한다.
예를 들어, setState 함수를 통해 상태를 변경하면 React는 해당 컴포넌트와 그 자식 컴포넌트들을 재조정(reconciliation)하고 필요한 부분만 DOM에 반영하는 리렌더링을 수행한다.
여기서 중요한 점은 setState가 비동기적으로 처리될 수 있다는 것이다. 또한, 이벤트 핸들러나 다른 함수 내에서 상태값을 참조할 때, 해당 함수가 실행되는 시점의 스냅샷을 기준으로 동작한다는 것이다. 따라서 setState를 호출한 직후에 함수 내에서 이전 상태값을 바로 기대하는 것은 예상치 못한 동작을 야기할 수 있다. 이는 JavaScript의 클로저와 이벤트 루프의 특성 때문에 발생하는 현상이다.
Redux와 같은 상태 관리 라이브러리는 이러한 복잡성을 효과적으로 관리할 수 있도록 도와준다. Redux의 핵심 아이디어는 애플리케이션의 모든 상태를 하나의 중앙 집중식 저장소(store)에서 관리하고, 액션(action)이라는 객체를 통해 상태 변화를 명시적으로 기술하며, 리듀서(reducer)라는 순수 함수를 통해 이전 상태와 액션을 기반으로 새로운 상태를 생성하는 것이다.
Redux를 사용하면 다음과 같은 이점을 얻을 수 있습니다.
- 예측 가능한 상태 변화: 모든 상태 변화는 액션을 통해 명시적으로 이루어지고, 리듀서는 순수 함수이기 때문에 동일한 액션과 이전 상태에 대해서는 항상 동일한 새로운 상태를 반환하기에 애플리케이션의 상태 변화를 추적하고 디버깅하는 데 매우 유용하다.
- 쉬운 상태 공유: 여러 컴포넌트가 동일한 상태를 공유해야 할 때, props를 통해 깊숙이 전달하는 props drilling 문제를 해결하고 중앙 저장소에서 필요한 상태를 직접 접근할 수 있도록 한다.
- 시간 여행 디버깅: Redux DevTools와 같은 도구를 사용하면 발생했던 액션들을 기록하고 되돌아가면서 각 시점의 상태를 확인할 수 있어 디버깅에 매우 효과적이다.
- 관심사 분리: UI 로직을 담당하는 컴포넌트와 상태 관리 로직을 분리하여 코드의 유지보수성과 테스트 용이성을 높인다.
물론 Redux는 학습 곡선이 있고, 규모가 작은 애플리케이션에서는 오히려 보일러플레이트 코드가 늘어나는 단점도 있지만 복잡한 상태 관리가 필요한 애플리케이션에서는 상태 변화를 예측 가능하게 만들고 효율적으로 관리할 수 있다는 점에서 큰 장점을 제공한다.
결론적으로, React의 기본적인 상태 관리는 컴포넌트 내부의 지역적인 상태 변화와 UI 업데이트에 최적화되어 있으며, 이벤트 기반의 빠른 UI 변화에 강점을 가진다. 반면, 애플리케이션 전체에 걸쳐 복잡하게 얽힌 상태를 효율적으로 관리하고 예측 가능한 상태 변화를 추구할 때는 Redux와 같은 전역 상태 관리 라이브러리가 강력한 도구가 될 수 있다.
Action
- 변경하고자 하는 객체 정보
- 액션타입 정의
- 액션생성자 함수 (순수함수)
reducer
- 리듀서 함수 (상태, 액션객체)
- 상태 타입 정의
slice = reducer + action
store
- app의 상태를 저장, 관리
- const store = createStore(reducer, [initialState])
dispatch (액션을 발생시키는 것)
- store의 내장함수
- store.dispatch(액션객체)
subscribe
- store의 내장함수
