[D+85] Redux 개념 이해하기

 

 

D+85

-  Redux 개념 이해하기 -

(Store, Action, Reducer)

 

---

 

 

Redux

• 자바스크립트 어플리케이션들의 상태를 관리하는 방법

 

• 리액트와 별개이며, 자바스크립트 언어 안에서 내가 원하는 곳 어디에서든 사용이 가능하다.

 

 

Redux를 사용하는 이유

만약에 컴포넌트가 App.js > VideoList.js > VideoListEntry.js 순으로 존재한다고 한다면

VideoListEntry에서 상태를 관리하고 싶을 경우엔 가장 부모컴포넌트에서 값을 차례차례 내려 주어서 값을 사용해야 한다.

 

또는 형제 컴포넌트에게 값을 넘겨 주고 싶을 때에는 자식 컴포넌트가 부모 컴포넌트로 올라간 다음에

다시 다른 자식 컴포넌트에게 값을 전달해야하지만 값을 받을 수 있었다.

 

하지만 이럴 경우엔 간단한 코드일 경우엔 큰 문제가 없어보이지만

만약에 컴포넌트들이 수백개, 수천개가 된다면 굉장히 복잡하고 가독성이 좋지 않은 코드가 완성될 것이다.

 

이때 만약에 부모컴포넌트를 거치지 않고 마치 편의점처럼 공간을 만들어 놓고

그곳에서 값을 불러오고 바꾸는 과정이 있다면 훨씬 간단할 것이다.

 

바로 리덕스가 이러한 기능을 담당하게 된다.

 

Store

스토어는 슈퍼나 편의점과도 같다.

 

상태가 관리되는 오직 하나의 공간으로

createStore라는 메소드가 존재하는데 이는 Reducer라는 함수를 달라고 요청하는 것으로

이때 Reducer는 나의 상태를 수정하는 함수를 의미한다.

 

Store에는 4-5 개의 함수가 존재하는데 이때 Reducer가 가지고 있는 값을 가지려면

getState를 사용해 주면 된다.

 

subscribe는 Store안에 있는 매순간의 변화들을 확인할 수 있다.

 

Action

액션은 일종의 주문서와 비슷한 역할을 하는 것으로 action에 값을 넣어 상태를 변화시킬 수 있다.

 

Reducer

Reducer는 현재 상태와 Action을 이용해 다음 상태를 만들어 내는 역할을 한다.

 

즉 Reducer는 Action을 운반하는 택시와 같은 개념이라고 볼 수 있겠다.

 

Redux의 기본 개념 : 3 가지 원칙

• Single source of truth : 동일한 데이터는 항상 같은 곳에엇 데이터를 가지고 온다. => Store

 

• State is read-only : 상태는 읽기 전용으로 리액트에서 우리가 setState를 통해서만 상태를 변경할 수 있었듯이 리덕스 또한 action이라는 것을 통해 상태를 변경해준다. => Action

 

• Changes are made with pure functions : 변경은 순수함수로만 가능하다 => Reducer