redux (redux) 1

Posted on In ,

redux의 중요성을 배웠다

결국 웹사이트 혹은 웹에서의 상태는 매우 중요하다. 현재 사용자가 어떤 component를 다루는 것에 따라 최상단의 상태정보가 필요할 수도 있고 반대도 가능하다. 하지만 그렇다고 해서 props로 모든 정보를 끌어오는 것은 유지 보수 관점에서 따지면 최악일수 밖에 없다. 예를 들어 form component 에서 받은 정보를 최상단 app컴포넌트에서 가장 밑 딴인 data component에서 추가적으로 상태를 추가했을때 어디서부터 어디까지 수정이 필요할지 파악하기가 매우 힘들것을 예상할 수 있다.

그렇기에 최상단에서 필요한 정보만을 가져오고 또한 변경할 수 있는 수단이 현재 react에서 많이 사용하는 redux이다
강의에서 배운건 자바스크립트로도 쉽게 표현 가능하다. 김민태 강사님이 말해주는 방식이 매우 정리가 잘되서 여기도 올려서 한번 정리해보고자 한다.

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
32
33
34
35
36
37
38
39
40
41
42
43
function createStore() {
  let state;
  let handlers = [];

  function send(action) {
    state = worker(state, action);
    handlers.forEach(handler => handler());
  }

  function subscribe(handler) {
    handlers.push(handler);
  }

  function getState() {
    return state;
  }

  return {
    send,
    getState,
    subscribe,
  };
}

function worker(state = { count: 0 }, action) {
  // do something
  switch(action.type) {
    case 'increase':
      return { ...state, count: state.count + 1 };
    default: 
      return { ...state };
  }
}

const store = createStore(worker);

store.subscribe(function() {
  console.log(store.getState());
});

store.send({ type: 'increase' });
store.send({ type: 'increase' });

  1. 먼저 상태를 저장시켜야하기 때문에 함수 createStore를 작성해준다.
  2. 함수 createStore를 통해 상태를 전달해야하기에 현재의 상태와 그 상태를 만들어주는 핸들러(함수)를 먼저 작성해본다
  3. 함수를 저장하기 위해서는 함수를 구독하는 방식 [] 에 push를 해서 따로 받아 줄 수 있도록 정리해본다
  4. state를 어떤 방식으로 보낼 것인지는 프로그래머가 지정하기에 worker라는 함수로 임시지정하여 action.type에 따라서 상태값이 달라지게 설정한다.
  5. store를 만들었고 그 만든 store에 함수를 지정하였고 그 뒤 실행하면 상태의 변화없이 어느 곳에서든 사용가능한 방식이 가능해진다.

이런 방식의 강의를 듣고 머리 속에 그림이 조금 그려지게 되었다. redux에 대해 미들웨어 같은 부분도 정리해볼 생각이다.