[노마드코더] Redux 101 - 세번째

React에서 Redux를 사용하기

[참고] 노마드코더

https://nomadcoders.co

노마드 코더 Nomad Coders

yarn add react-redux react-router-dom

 

리액트의 각 컴포넌트에서 Store에서 관리하는 데이터를 읽고 쓰기 위해서 connect() 함수를 사용.

[참고]https://react-redux.js.org/api/connect

Connect | React Redux

• connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)
• mapStateToProps(state, ownProps?) : store.getState()와 같은 기능으로 현재 state를 가져와서 컴포넌트에 object형태로 return 해준다. (state: 현재 state Object, ownProps: connect된 컴포넌트의 props를 object형태로 가져옴)
• mapDispatchToProps(state, ownProps?) : store.dispatch()와 같은 기능으로 dispatch 함수 자체를 받아와서 컴포넌트에 함수를 Object 형태로 넘겨주면 컴포넌트에서 함수를 호출할 수 있다. (state: dispatch(함수), ownProps: 컴포넌트의 props)

=> 컴포넌트는 props형태로 현재 state(데이터)를 받을 수 있고 업데이트할 때도 dispatch로 받은 함수를 사용하기만 하면 된다.

=> store.js 라는 별도의 파일에서 데이터에 대한 처리를 담당하고 컴포넌트와 통신을 connect함수와 mapStateToProps, mapDispatchToProps 두 함수 구현을 통해 간단하게 할 수 있다.

반응형

Home.js

ToDo.js

Detail.js

store.js

index.js

App.js

* ES6 문법

 

- spread : ES6 Spread 연산자, 배열이나 객체의 내용을 가져와서 각각 뿌려줌.

ex) const a = [1, 2, 3] const b = [...a, 4, 5]   => b = [1, 2, 3, 4, 5]

- rest : ES6 Rest 연산자, 배열이나 객체, 파라미터에서 사용. 나머지 내용을 지칭. 마지막만 가능

ex) const a = [1, 2, 3] const [first, ...rest] = numbers     => first = 1, numbers = [2, 3]

 

[참고]learnjs.vlpt.us/useful/07-spread-and-rest.html

07. spread 와 rest 문법 · GitBook

- function()(): ES6 currying 함수, 함수 내부에서 다른 함수를 호출할 때 이전 함수의 인자를 기억하고 있다가 넘겨주는 방법

 

- connect(A)(B) : react-redux의 connect 함수의 원리는 내부에 있는 Connect 컴포넌트에서 store에 관련된 로직을 처리하고 return된 함수에 처음에 인자로 넘어왔던 컴포넌트를 넘겨 새로운 리액트 컴포넌트를 생성하여 return 한다.

 

즉, A위치의 파라미터로 Connect 컴포넌트를 처리한 후 함수를 return 하고

B위치에 넘겼던 컴포넌트를 이 함수의 파라미터로 보내서 최종적으로 새로운 React 컴포넌트를 return 하는 원리이다.

[참고]https://medium.com/@juinc/how-does-connect-work-in-react-redux-a25c68692335

How does connect work in React-Redux?

결론

처음에는 Redux를 사용하는 것이 생각하기 더 복잡하고 공부가 필요하지만

능숙해지고 더 복잡한 프로젝트를 진행한다면 Redux를 사용하는 것이

확실히 컴포넌트들과 데이터, 로직의 구분을 명확하게 하고 전체적인 구조가 간결해지면서 데이터의 흐름이 정리가 되었다.

그리고 데이터를 state로 관리하면서 데이터의 일관성과 신뢰도가 향상되고 유지보수가 용이할 것이라고 생각한다.