«   2022/10   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Archives
Today
0
Total
96,326
관리 메뉴

차근차근

[Redux] Pure Redux: Counter 본문

대학교/FE

[Redux] Pure Redux: Counter

SWKo 2020. 3. 30. 16:41

0. Vanilla Counter

  • Redux는 기본적으로 Javascript Application들의 state(상태)를 관리하는 방법이다.
  • React뿐만 아니라 Angular, Vue.js, Vanilla Javascript 등 원하는 곳에 쓸 수 있다.
  • 먼저 project를 시작하기 위해 다음과 같은 명령어를 실행한다.

 

 

  • 디렉터리가 만들어지고 해당 디렉터리로 이동한다.

 

 

  • redux를 사용하지 않는 버전을 보기 위하여 /src/index.js에서 간단하게 코드를 작성한다.

 

 

  • yarn start 명령어를 실행하면 다음과 같은 화면을 볼 수 있다.

 


1. Store & Reducer

  • redux를 사용하는 버전에 대하여 살펴보겠다.
  • 먼저 redux를 사용하기 위해 yarn add redux(혹은 npm install redux)를 실행한다.

  • 다음과 같이 import를 해준다.

  • store는 뭘까?
    • store는 data를 넣는 곳이다. 즉 state를 넣는 곳이다.
  • state는 나의 application에서 바뀌는 data를 말한다.
  • 위 예제에서는 count가 state이다. 아래에 있는 함수들은 모두 count를 modify하기 위한 목적이다.
  • 리덕스에는 createStore이라는 function(함수)가 있다.
  • store가 하는 일은 기본적으로 나의 data를 넣을 수 있는 장소를 생성해 주는 것이다.
  • 리덕스는 data를 관리하는데 도와주는 역할을 하기 위해 만들어졌다.

 

  • 이제 data를 store에 넣어보겠다.
  • store를 만들고 reducer를 만들지 않으면 에러가 난다.
  • 따라서 reducer를 만들어준다.
  • reducer가 뭘까?
    • reducer는 data를 modify(수정)하는 function(함수)이다.
  • 여기서 reducer는 count를 increase하거나 decrease하는 것이 되겠다.
  • 아래와 같은 예시를 보면 reducer가 "hello"를 반환한다. 이 "hello"가 application에 있는 data(state)가 된다.

  • 중요 : reducer가 return 하는 것은 나의 application의 data가 되는 것이다.
  • 오직 reducer만 유일하게 data를 modify할 수 있다.
  • 그렇다면 어떻게 reducer안에서 state를 바꿀까?
    • action을 통해서 바꾼다!

  • 정리해보면 createStore는 store를 create하고 store는 나의 data를 저장하는 곳이다. 위 케이스에서 data는 0이 되고 그게 data가 되는 것이다.
  • 우리가 store를 만든다면 store애 reducer(여기선 countModifier)를 줘야 한다.
  • default로 reducer(=data modifier)는 현재의 state와 함께 불려질 것이다. 
  • 이제 아래에서 어떻게 data(count)를 modify할지 보겠다.

2. Actions

  • data를 modify한다. 어떻게??? action을 통해!
  • action은 redux에서 function을 부를 때 쓰는 두번째 paramater, 혹은 argument이다.
  • 그래서 다음과 같이 console.log(count, action) 을 하면 어떤 결과가 나오는지 확인해보겠다.

코드
결과화면

  • 위에 action에 해당하는 값을 보면 괴상한 값이 나온다. action은 countModifier와 소통하기 위한 방법이다.
  • action은 countModifier에게 말할 수 있는 방법이다.
  • 이제 다음과 같이 dispatch를 도입해보겠다.

  • 결과를 확인해보면 다음과 같다.

  • countModifier가 2번 불린 것이다. 처음으로 initialized된 function과 type이라는 다른 action을 볼 수 있다.
  • 보다시피 store, dispatch, action을 하면 redux가 countModifier를 부를 것이다.
    • countModifier(currentState = 0, {type: "HELLO"}) 와 같은 방식으로 부를 것이다.
  • 이것이 내가 countModifier에게 메세지를 보내는 방법이다.

 

  • 이제 적용을 시켜보겠다.

  • 위 화면은 dispatch를 통해 countModifier로 메세지를 보내는 것이다.
  • 위에서 말했듯 countModifier가 return 하는 모든 것은 data가 된다.
  • 따라서 아래와 같이 코드를 작성할 수 있다.

  • 위 코드를 설명해보면 다음과 같다.
  • data의 store를 create하고 data의 modifier인 countModifier이 message를 그 store에 보내면 된다. 그 send하는 방법은 dispatch를 사용하면 된다. 전송한 message는 action에 넣으면 되고, 내가 해야 할 일은 action을 체크해보는 것이다.
  • 이제 다른 action도 추가해보겠다.

  • 정리해보면 나의 data를 modify할 수 있는 function은 countModifier이다. 그래서 나는 밖에서 countModifier와 communication 할 수 있어야 한다. 그리고 communication 하는 방법은 countModifier에게 action을 보내는 것이다.
  • 위 과정을 보기 위해 action을 console에 찍어보자.


3. Subscriptions

  • 이제 dispatch와 모든 것들을 우리의 button에 연결해보자.

  • 다음과 같이 countStore를 console에 찍어보겠다.

  • 다음과 같은 결과가 나온다.

  • dispatch, getState가 보이고 subscribe라는 것이 보인다.
  • subscribe가 뭘까?
    • subscribe는 우리에게 store안에 있는 변화들을 알 수 있게 해준다.
  • subscribe의 기능을 보기위해 다음과 같이 작성한다.

  • store를 구독(subscribe)하고 있다.
  • 버튼을 누를때마다 store에 변화가 있다.
  • 여기서 버튼을 누를때마다 number가 update되게 할 수 있다.

  • 현재까지의 코드이다.

  • 다음은 위에서 배운 것들의 요약(Recap)과 함께 코드를 정리(Refactoring)해보겠다.

4. Recap & Refactoring

  • 위 예제의 countModifier(reducer)는 현재 상태의 application과 함께 불려지는 function이다.
  • action은 countModifier와 소통하는 방법이다.
  • countModifier가 return 하는 것은, application의 state이다. 즉, reducer가 return 하는 것은 무엇이든지 application의 state가 된다.
  • reducer는 current state와 action이 함께 불려진다. 어떻게 reducer에게 action을 보내냐면 dispatch를 사용해서 보내는 것이다.
  • dispatch가 reducer를 불러서 current state와 내가 보낸 action을 더한다. action은 object 이어야 한다. string이 될 수 없다.
  • action은 type이 있어야 한다. 무조건!
  • 만약에 내가 change를 나의 store에서 감지하고 싶다면 그 change를 subscribe하면 된다.
  • 그래서 언제든지 store가 바뀔 때, 바뀌지 않은 function을 실행하면 된다.

 

  • 위 내용이 지금까지 한 것을 요약한 것이고 이제 코드를 조금 바꿔보겠다.
  • 위에서는 if / else if 를 사용하였지만 보통 switch를 많이 사용한다. (첫번째 refactoring)

  • action.type을 쓸 때 string형으로 하면 실수를 할 수 있으므로 string을 keep해주는 const를 만든다.(두번째 refactoring)
  • string 대신 constant(variable)을 쓴다. 에러를 찾을 때 훨씬 수월해진다.

📌노마드코더의 '초보자를 위한 리덕스'수업을 듣고 글입니다.

'대학교 > FE' 카테고리의 다른 글

[React-Native] react-native init  (0) 2020.04.02
[Redux] Pure Redux: To Do List  (0) 2020.04.01
[React Hooks] Hooks (1)  (0) 2020.03.21
[React-Native] (6) 플랫폼 API  (0) 2020.03.15
[React-Native] (5) 스타일  (0) 2020.03.14
0 Comments
댓글쓰기 폼