Redux - 전역 상태 관리

리액트는 사용자 인터페이스를 구축하기 위한 JS 라이브러리이다. 리액트에서 컴포넌트(Component)는 UI를 재사용 가능한 작은 단위로 분리하는 방법을 제공한다. 컴포넌트는 독립적으로 작동하며, 특정 기능을 수행하거나 화면의 특정 부분을 표현하는 역할을 한다.

 

컴포넌트 역할

 

• UI 요소의 표현
  • HTML 요소를 렌더링하거나, 다른 리액트 컴포넌트를 조합하여 UI를 구성할 수 있다.
• 상태 관리
  • 컴포넌트는 자체적으로 상태(state)를 가질 수 있다.
  • 컴포넌트의 상태가 변경되면 리액트는 자동으로 UI를 갱신하여 변경된 상태를 반영한다.
• 이벤트 처리
  • 컴포넌트는 사용자의 동작에 대한 이벤트를 처리할 수 있다.
• 재사용성
  • 컴포넌트는 독립적으로 존재하며, 다른 컴포넌트와 조합하여 재사용할 수 있다.
  • 이는 코드의 재사용성과 유지 보수성을 향상시키는 장점을 제공한다.

컴포넌트 분리 기준은 애플리케이션의 구조와 개발자의 판단에 따라 달라진다.

 

1. View에 따른 분리
2. State에 따른 분리

View에 기준점을 두고 컴포넌트를 분리를 했는데 props-drilling 문제가 발생했다.

 

리액트에서 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능하다. 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다. 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야 하는데, 이를 Props drilling 현상이라고 한다.

 

해결 방안 : Redux

Redux는 상태 관리 라이브러리로, JS 애플리케이션의 상태를 예측 가능하고 일관성 있게 관리하기 위한 도구이다. 애플리케이션의 상태를 하나의 JS 객체로 관리한다.  Redux를 사용하면 애플리케이션의 상태를 중앙 집중화하고, 상태 변경을 추적하고, 컴포넌트 간의 데이터 흐름을 관리할 수 있다.

 

Redux에서는 Action >> Dispatch >> Reducer >> Store 순서로 데이터가 단방향으로 흐른다.

 

액션 (Actions)

액션은 상태를 변경하는 작업을 기술하는 객체이다. 액션은 일반적으로 애플리케이션에서 발생하는 사용자 이벤트나 네트워크 응답과 같은 사건을 나타낸다. 액션은 'type'이라는 필수적인 속성과 추가적인 데이터를 포함할 수 있다.

 

디스패치(Dispatch)

디스패치는 reducer로 action 객체를 전달하는 역할을 한다.

 

리듀서 (Reducers)

리듀서는 액션(action)을 받아 상태를 어떻게 업데이트할지 정의하는 순수한 함수이다. 리듀서 함수는 첫번째 매개변수로 현재 상태 값을 받고 두번째 매개변수로 액션이라는 객체를 받는다. 그리고 전달받은 액션에 따라 상태 값을 변경시킨다. 리듀서는 이전 상태를 변경하지 않고 새로운 상태를 반환하기에, 상태의 불변성을 유지한다.

 

스토어 (Store)

Redux에서는 스토어라는 상태 저장소를 사용한다. 스토어에서 관리되는 상태 값은 일반적인 방법으로 꺼내오거나 변경하는 것이 불가능하며, 정해진 방식을 통해서만 가져오거나 변경할 수 있다. 이러한 방식을 사용하는 이유는 스토어 내부의 상태값의 안정성을 유지하기 위함이다.