[React] 리덕스(Redux)에 대해서 알아보자

프론트엔드/React

병걸 2024. 2. 5. 11:14

Redux는 JavaScript(자바스크립트) 상태관리 라이브러리 이다.

또한 Redix의 본질은 Node.js 모듈이다.

여기에서 상태 관리 도구란 뭘까?

상태 -> React에서 State는 component 안에서 관리되는 것이다.

1) 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.

2) 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.

3) 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.

4) 상태를 관리하는 상위 컴포넌트에서 게속 내려 받아야 한다. (Props drilling 이슈 발생)

위에 사항들처럼 상태 관리의 복잡성을 해결해주는 상태 관리 툴이 있습니다.

- React Context

- Redux

- Mobx

위 상태 관리 툴 중에 Redux를 가장 많이 사용한다.

다시 돌아가서 Redux의 기본 개념이 3가지 원칙이 있습니다.

1. Single source of truth

- 동일한 데이터는 항상 같은 곳에서 가지고 온다.

- 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.

2. State is read-only

- 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.

- 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. Changes are made with pure functions

- 변경은 순수함수로만 가능하다.

- 리듀서와 연관되는 개념이다.

- Store -> Action -> Reducer 순으로 데이터가 한 방향으로 흘러갑니다.

Redux의 장점으로는

1) 상태를 예측 가능하게 만든다. (순수 함수를 사용하기 때문에)

2) 유지보수에 용이하다. ( 복잡한 상태 관리와 비교)

3) 디버깅에 유리하다.

4) 테스트를 붙이기 용이하다.