[React]React-redux란 무엇인가?

*다음은 생활코딩 - 'Redux-1 수업소개' 과 John Ahn - '노드 리액트 기초강의#26 Redux 기초' 동영상을 수강하고 작성한 글임을 밝힙니다.*

https://www.youtube.com/watch?time_continue=22&v=dJC_uAR7d60&feature=emb_logo

https://www.youtube.com/watch?v=Jr9i3Lgb5Qc

 

 

Redux란?

  A predictable state container for JavaScript Apps. 이 Redux의 정의이다. 이 뜻은 자바스크립트 애플리케이션을 위한 예측가능한 상태의 저장소이다. 그렇다면 이 뜻은 무엇일까?소프트웨어의 복잡성은 굉장히 많은 문제를 일으킨다. 자연스럽게 우리는 코드의 복잡성을 해결하고 싶을 것이다. 따라서 Redux는 소프트웨어의 복잡성을 낮춰서 코드의 복잡성을 낮출 수 있게 예측해준다.

 

 

 

그렇다면 Redux는 어떻게 이 목적을 달성할까?

1.  Redux는 하나의 상태를 갖는다. 즉 하나의 객체안에 애플리케이션에 필요한 데이터를 모두 우겨넣는다. 이렇게 하면 여러곳에 흩어져있는 데이터보다 복잡성이 떨어질 것이다. 
   
   
   
   
2. 이 하나의 상태는 너무 중요하기 때문에 외부로부터 차단시킨다. 그렇다면 데이터의 접근하기위해서는 인가된 함수로만 접근이 가능하다. 예를들어 데이터의 수정을 가할 때는 Reducer라는 것을 거쳐서만 데이터 수정이 가능하게 하며 Redux는 그것을 꼼꼼히 기록하여 상태를 변경시켜준다. 데이터를 가져갈 때도 getState라는 함수를 이용해야지만 가져갈 수 있게 하는 것이다. 또한 state에 저장된 데이터를 가지고 있는 여러 부품들에게 state의 데이터가 바뀔때마다 바뀌었다는 사실을 알려 바뀐 부품만 신경을 쓰게 한다. 이렇게 예기치 않게 데이터가 변경되는 것을 막고 함수를 거쳐서 데이터의 접근할 수 있게 하여 코드의 복잡성을 예측가능하게 해준다. 

 

 

 

React-redux

react-redux에서 중요한 state와 state와 대조되는 Props를 비교해보자.

• Props

  이것은 부모컴포넌트와 자식 컴포넌트가 있을때 컴포넌트의 소통에 이용된다. 그리고 props에서 소통되는 데이터는 변할수가 없다.

   

https://www.youtube.com/watch?time_continue=22&v=dJC_uAR7d60&feature=emb_logo

• State
  state은 props와 다르게 데이터를 변하게 할 수 있다. 그리고 부모와 자식 컴포넌트에 소통이 아닌 한 컴포넌트 안에서 데이터를 전달할 때 사용된다.

https://www.youtube.com/watch?time_continue=22&v=dJC_uAR7d60&feature=emb_logo

 

따라서 Redux는 State를 관리하는 것으로 Props를 쓰때 만약 부모의 자식의 자식이 있다면 부모가 자식의 자식과 소통할 때는 부모의 바로 직계 자식을 꼭 거쳐서 소통해야한다. 하지만 State를 사용하면 이런 과정 없이 한 데이터 공간에 모두 저장하여 바로 가져오면 된다.

 

 

 

 

React-redux Flow (한 방향 소통)

 react-redux는 한 방향으로만 흐른다. 

action : 무엇이 일어났는지 설명하는 객체

 

{type : 'LIKE_ARTICLE', articleID:42}

{type : 'LIKE_ARTICLE', articleID:42}

 

reducer : 이전에 값이 action의 설명을 통해  nextState로 바뀌었음을 return으로 알려준다.

(previousState, action) => nextState

(previousState, action) => nextState

 

store : 애플리케이션의 모든 state을 감싸주는 역할을 한다.

 

 

 

* 설치해야할 라이브러리*

• redux
• react-redux
• redux-promis 
• redux-thunk