리덕스 ( redux )

1-blue·5일 전
0

React

목록 보기
3/6

리덕스 (redux)

리덕스는 체계적으로 전역 상태 관리를 하는데 사용할 수 있습니다.

기본적으로 리덕스는 리액트의 상태 관리를 하는데 사용하기 위해 만들어졌지만, 리액트에 국한돼서 사용하지 않아도 상관없습니다.

리덕스 용어 정리

1. 액션 (action)

상태에 변화를 주기위해 사용하는 객체를 의미합니다.
기본적으로 { type, payload } 형태로 이루어져 있습니다.

2. 액션 생성 함수

액션을 생성하는 함수입니다.
액션을 생성할 때 type에 오타가 있을 경우를 방지하고, 편하게 액션을 만들기 위한 함수입니다.

3. 리듀서 (reducer)

실제로 변화를 일으키는 함수입니다.
이전 상태와 액션을 이용해서 새로운 상태를 만드는 함수입니다.
( 이전 상태 + 액션 => 새로운 상태 )

중요한 부분은 상태를 변경할 땐 항상 불변성을 유지하면서 변경해야합니다.

4. 스토어 (store)

리덕스를 적용시키기 위해 생성하는 하나의 스토어입니다.
createStore()로 생성하고 몇 가지 중요한 내장함수를 가집니다.

  • 스토어의 내장 함수
    1. dispatch(): 액션을 이용해서 리듀서를 실행하게 함
    2. getState(): 현재 상태를 가져옴
    3. replaceReducer(): ?
    4. subscribe(): 디스패치가 일어나서 상태가 업데이트될 때마다 호출됨

5. 예시

예시에서 제일 중요한 것은 흐름을 이해하는 것이라고 생각합니다.

  • 코드의 흐름
    1. type을 미리 정의함 ( 오타방지 )
    2. action 생성 함수를 정의 ( 쉽게 액션 생성 및 반복적 사용 )
    3. reducer생성, 어떤 action에 어떤 변화를 줄지 미리 정해두는 것
    그리고 dispatch(action)을 하면 해당 action을 이용해서 정해진 행위를 함
    4. 이벤트에 dispatch(action) 형태로 연결
const { createStore } = require("redux");

// type 정의
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";

// action 생성 함수... 반환값이 action
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = difference => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });

// 초기 상태 정의
const initalState = {
  toggle: false,
  counter: 0
};

// 리듀서 정의
const reducer = (state = initalState, action) => {
  switch (action.type) {
    case TOGGLE_SWITCH:
      return {
        ...state,
        toggle: !state.toggle
      }
    case INCREASE:
      return {
        ...state,
        counter: state.counter + action.difference
      }
    case DECREASE:
      return {
        ...state,
        counter: state.counter -1
      }
  
    default:
      return state;
  }
};

// 스토어 생성
const store = createStore(reducer);

// 랜더 함수 생성 ( 리액트에서 사용할 땐 변화를 자동으로 감지하지만 바닐라자바스크립트에서는 직접적으로 변화시켜줘야해서 정의함 )
// 즉, 리액트는 데이터만 신경쓰면 화면단을 알아서 처리해줌... 리액트 사용 이유
const render = () => {
  const state = store.getState();

  // ... 뭔가 화면에 변화를 줄 작업을 여기서 처리하면 됨
  // 예를 들면 counter값을 연결할 태그의 innerText를 변화시킨다든지
};

render();

// 구독
store.subscribe(render);

// 이후 이벤트에 dispatch(action)을 등록하면 됨

참고 서적

마무리

처음 리덕스를 공부했을 때 앞뒤 안 가리고 리액트에 바로 적용부터 했었고 그때 리덕스를 이해하는데 엄청 고통스러웠습니다.

그 이유가 리액트의 기본적인 문법조차 제대로 모를 때 리덕스를 사용하니 이게 리액트를 이해 못 한 건지 리덕스를 이해 못 한 건지 너무 헷갈렸고, 두 번째로 리액트에 리덕스를 적용시킬 때 그냥 정해진 형태대로 코드를 작성해야 하는 부분, 즉 돌아가는 모습이 보이지 않아서 당장 이해할 수 없는 부분과 겉으로 보여서 이해하고 넘어가야 하는 부분에 대한 판단을 하지 못하는 상태여서 더욱 힘들었습니다.

결론은 리덕스를 사용하기 전에 바닐라 자바스크립트에서 직접 적용해 보고 이것저것 코드를 굴려보고 나서 리액트에 적용하는 것이 본인에게도 더 도움이 된다고 생각합니다.

0개의 댓글