⭐️ [Redux] 상태 관리 라이브러리

Redux 로고

 

🌊 Redux

리덕스를 사용하면 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 전달, 업데이트할 수 있다. Redux는 React에 종속되는 라이브러리가 아니며, 리액트에서 사용되려고 만들어졌지만 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있으며 예 : angular-redux, ember-redux 등, Vue도 가능하지만 Vue에선 리덕스와 유사한 vuex를 주로 사용) 바닐라 자바스크립트와 함께 사용할 수 있다. 

 

Redux 키워드

 

Action 액션

: 상태에 어떠한 변화가 필요하면 액션이 발생한다. 액션은 객체 형태로 표현한다.

{
 type : 'INCREASE'
}

액션 객체는 type을 반드시 포함한다. 이 값을 액션의 이름이라고 생각해도 된다. type 외의 값은 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있다. 

 

Action 예시

{
 type : 'ADD_TODO',
 data : {
  id: 1,
  text : '리덕스 배우기'
 }
}

{
 type : 'CHANGE_INPUT',
 text : '오리너구리'
}

 

 

Action 생성 함수

: 어떤 변화를 일으켜야 할 때 마다 액션 객체를 만들어야 하는데 작성 과정이 번거롭거나 정보를 놓칠 수 있으므로 이러한 일을 방지하기 위해 함수로 만들어 관리합니다. 

function addTodo(data) {
  return {
    type: 'ADD_TODO',
    data,
  };
}

const changeInput = text => ({
  type : 'CHANGE_INPUT',
  text
})

 

 

Reducer

: 변화를 일으키는 함수. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온 후 두 값을 참고하여 새로운 상태를 만들어 반환한다.

 

const initialState = {
  counter: 1,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return {
        counter: state.counter + 1,
      };
    default:
      return state;
  }
}

 

const count = 1;

const counterReducer = (state = count, action) => {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;

    case 'DECREASE':
      return state - 1;

    case 'SET_NUMBER':
      return action.payload;

    default:
      return state;
  }
};

 

 

STORE

: 리덕스를 적용하기 위해 스토어를 만든다. 한 프로젝트는 단 하나의 스토어만 가질 수 있으며, 스토어 안에는 현재 애플리케이션의 상태와 리듀서, 그 외에도 몇 가지 중요한 내장 함수를 가지고 있다.

 

 

Dispatch

: 디스패치는 스토어의 내장 함수 중 하나이다. 디스패치는 '액션을 발생시키는 것'이라고 이해하면 된다. 디스패치 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어 호출한다. 이 함수가 호출되면 리듀서 함수를 실행시켜서 새로운 상태를 만들어준다.

 

 

Subscribe

: 스토어의 내장 함수. 액션이 디스패치되어 상태가 업데이트 될 때 마다 호출된다.

const listner = () => {
 console.log('상태가 업데이트 됨');
}
const unsubscribe = sotre.subscribe(listner);

unsubscribe(); // 추후 비활성할시 함수를 호출

 

 

Redux 3가지 규칙

 

단일 스토어

: 하나의 애플리케이션 안에는 하나의 스토어가 들어 있다. 여러 개의 스토어를 사용하는 것이 완전히 불가능하진 않지만 상태 관리가 복잡해질 수 있으므로 권장하지 않는다.

 

 

읽기 전용 상태

: 리덕스 상태는 읽기 전용이다. 기존에 리액트에서 setState를 사용하여 state를 업데이트할 때도 객체나 배열을 업데이트하는 과정에서 불변성을 지켜주기 위해 spread 연산자를 사용한 것 처럼 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다.

 

리덕스가 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문이다.

 

 

순수함수

: 변화를 일으키는 리듀서 함수는 순수한 함수여야 한다.

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
• 파라미터 외의 값에는 의존하면 안된다