[React] redux 정리

https://pixabay.com/ko/photos/tv-타워-건물-저녁-6139241/

 

기존 RN 프로젝트를 Refactoring 하기 위해 Redux를 공부했습니다.

하지만 아쉽게도 팀 내부 회의 후  Redux 대신 MobX를 도입하기로 결정해서 Redux로 Refactoring을 진행하지는 못했지만, Redux를 공부한 내용을 간단히 정리하려 합니다.

(MobX는 추가적으로 더 공부한 후 정리하려 합니다😁)

 

※해당 게시글은 Redux에 대해 자세한 설명보다는 각 용어나 개념에 대한 짧은 정리 수준의 내용으로 이뤄져 있습니다. 조금 더 깊고 많은 내용을 원하시는 분은 참고 자료에 있는 게시글 들을 보시는 것도 좋을 거 같습니다.

 

Redux란?

점유율이 가장 높은 상태 관리 라이브러리로, 글로벌 상태 관리를 쉽게 할 수 있도록 도와준다.

 

지난 1년 간(2020.09 ~ 2021.09)  redux와 mobx 다운로드 수 비교(출처: npm trends)

- container component와 presentational component

1. container component: Redux와 관련된 component로 presentational component에 props로 state와 dispatch가 정의된 함수를 전달해준다. 주로 데이터를 처리하는 코드 위주로 작성된 component이다.

 

2. presentational component: Redux와 관련 없는 component, 주로 화면을 렌더링 하는 걸 담당하는 component

 

위 두 가지 컴포넌트는 권장사항이며 꼭 분리해서 사용할 필요는 없다.

 

- store

: 중앙에서 관리할 상태들이 저장되는 곳으로, 앱 하나당 한 개의 store만 존재합니다.

 

- reducer

:  action의 type에 따라 상태를 변화시키는 함수이며, 내부 적으로 순수 함수로 구현이 되어야 합니다.

* 순수 함수: 같은 입력에 대해 항상 같은 결과를 반환하는 함수

 

- action

: 상태의 변화가 필요할 때 action 생성합니다. action의 type에 따라 어떻게 상태 변경할지 결정됩니다.

 

Ducks 패턴

redux 공식 문서에서는 action과 reducer를 각기 다른 디렉터리와 파일에 정의하도록 나와있습니다.

하지만 좀 더 편리하게 사용 및 유지 보수를 하기 위해 Action type, Action creator, Reducer를 하나의 파일에 정의하는 방식이 있고

이를 Ducks 패턴이라고 합니다.

* Action type, Actino creator, Reducer를 합쳐서 정의하는 파일을 하나의 module이라고 합니다.

 

Ducks 패턴에 대한 자세한 설명: https://github.com/erikras/ducks-modular-redux

 

Ducks 패턴에는 네 가지의 규칙이 있습니다.

 

- 규칙

1. module 내부에서 reducer는 export default 되어야 한다.

2. module 내부에서 action creator는 export 되어야 한다.

3. action type은 [module 이름 또는 reducer 이름]/[action type]으로 정의되어야 한다.

ex. 'widgets/LOAD'

4. action type의 상수 이름은 upper sank case로 써야 한다.

 

react-redux란?

Redux는 react 만을 위한 상태 관리 라이브러리가 아닙니다.

react에서 Redux를 사용할 때 react-redux의 도움을 받습니다.

 

- connect

: 주로 class 형 컴포넌트에 쓰이는 함수로, store 내부의 상태 값과 action을 dispatch 하는 함수를 container component의 props로 연결해줍니다.

const mapStateToProps = (state) => ({
	/** 관리가 필요한 state를 props에 연결*/
});


const mapDispatchToProps = (dispatch) => ({
    /** action을 dispatch하는 함수를 정의하여 props로 전달*/
});

export default connect(mapStateToProps, mapDispatchToProps)(container component);

 

- useSelector

: store 내부에 저장된 상태 값에 접근할 수 있도록 도와주는 Hook입니다.

 

- useDispatch

: dispatch를 반환해주는 Hook으로 반환된 dispatch에 action을 보내 상태 값을 관리할 수 있습니다.

 

 

---

참고 자료

https://d2.naver.com/helloworld/1848131 - Naver D2 React 적용 가이도 - React와 Redux

https://medium.com/@jang.wangsu/rn-react-native-redux-란-reactive-부터-c089d4549edb - Clint Jang - [RN] React Native, Redux 란? Reactive 부터..

https://react.vlpt.us/redux/ - 벨러포터와 함께하는 모던 리액트

 

읽어 주셔서 감사합니다 :)

잘못된 부분이 있다면 댓글로 편히 알려주세요😊