[React, 라이브러리] react-redux .

redux라는 것을 알기 전 FLUX패턴과 FLUX패턴이 왜 필요한지에 대하여 알 필요가 있다. 

 

 

UNIDIRECTION-DATA-FLOW

영어로 하니 무섭지만 한국어로 번역하면 단방향 데이터 흐름이다. 리액트는 각각의 컴포넌트가 state를 가지고 있고 상위컴포넌트가 하위 컴포넌트에 데이터를 전달해줄때 props 개념을 사용해서 전달한다. 그런데 다음과 같은 구조가 있다고 가정을 해보자 

 

 

 

 

ArticleList컴포넌트 하위에 있는 comment에 글을 작성하고 추가하려면 현재 접속해있는 user의 정보가 필요하다 그러나 정보가 보관되어 있는 userStatus 컴포넌트는 comment와 다른 edge에 해당하고 있어 user정보를 현재 주지 못하고 있다. 그래서 comment컴포넌트와 userStatus를 연결시켜주었다.

 

여기까지 보면 해결 ! 을 외치고 끝낼 수 있을 것 같지만 그렇지 않다. 바로 많은 컴포넌트들이 서로 다른 컴포넌트에있는 데이터를 필요로 하고 있어 data-flow가 완전 엉망이 되어버린 것이다. 

 

 

 

흐름이 굉장히 꼬여 스파게티코드가 되어버렸다. 이렇게 되면 작동은 가능하다. 그럼 도데체 뭐가 문제냐 ? 관리가 안된다. 지금 처럼 별거 컴포넌트가 별로 없어도 복잡한데 포털사이트나 쇼핑몰같은 사이트를 만들면 컴포넌트간 관계가 애매해지고 한개의 컴포넌트에서 관리해야 하는 쓸대없는 상태가 늘어날 수 있다. 

 

FLUX 패턴 

그래서 컴포넌트외부에서 한 저장소를 만들어 그곳에는 user 정보나 현재 경로같은 데이터를 저장하여 사용 할 수 있게 하자고 나온 패턴이 FLUX패턴이다.

 

 

이 플럭스 패턴은 다음과 같이 이루어져있다. 

view가 action을 dispatch하면 dispatcher가 이를 받고 dispatcher가 action에 있는 type에 따라 store에 있는 현재 state를 변경 시킨다. 

 

또한 view가 action을 dispatch하지 않아도 default로 값을 설정하여 action을 dispatch한 상태로 view에 데이터를 전달 할 수 있다. 

 

REDUX

리덕스를 단번에 이해하기에는 어렵다. 조금 생소한 단어들이 나오고 함수나 객체들이 각기 우리가 알던 이름과 다르게 나오고 이에 적응해야하기 때문이다. 나 또한 리덕스를 이해하는데 2주정도가 걸렸고 redux를 완전히 이해하기까지 약 한달동안 여러 프로젝트를 거치고서야 이해하게 되었다. 

 

redux는 react에서 state를 조금 더 효율적으로 사용하기위해서 만든 라이브러리이다. 이번 시간에는 redux로 예제를 만들어 구현하지 않고 리덕스에 필요한 개념들을 정리하는 것으로 포스팅을 마무리 하도록 하겠다. 

 

 

 

redux는 다음과 같이 정희할 수 있다. " redux는 view에서 action을 dispatch함으로써 store에 있는 reducer에서 action의 type을 보고 type에 맞게 데이터를 가공한 후 store에 데이터를 변경한다. "

 

단어 정리 

store : 현재 state가 저장되어 있는 저장소 

 

connect : view에서 store에 있는 데이터를 받으려면 store를 연결해야한다. // 공홈에는 subscribe이지만 실제 사용 메서드는 connect로 이루어진다.  

 

action : view에서 전달하는 데이터를 담은 객체이다. action객체는 해당 액션의 종류를 결정하는 type 과 데이터를 담고있는 payload로 나누어져있다. 

 

dispatch : action객체를 store로 보내는 행위를 말한다.

 

reducer : dispatch로 들어온 액션객체의 타입을 보고 해당 액션의 페이로드를 처리한다. 

 

mapStateToProps  : 스토어에 있는 state를 해당 컴포넌트로 props로 전달하는 메서드

 

mapDispatchToProps : 액션을 디스패치할 수 있도록 디스패치를 props로 받아오는 메서드