Redux

  [ Redux란? ]  

 

자바스크립트 상태 관리 라이브러리입니다.

리덕스는 가장 사용률이 높은 상태 관리 라이브러리로써 리액트의 복잡한 컴포넌트 구조 속에서

보다 간편하게 모든 컴포넌트들이 state를 쉽게 공유할 수 있게 해주는 방식입니다.

 

우선 리덕스는 리액트 내부에 있는 기술이 아니며, 순수 HTML, JS 내에서만 사용이 가능하고,

컴포넌트에 집중된 리액트와 시너지가 좋아 대체적으로 리액트에 리덕스를 사용합니다.

 

  [ Redux에서 자주 사용되는 키워드 ] 

 

• 액션 (Action)
  state 에 어떤 변화가 필요할 때 우린 액션이란 것을 발생시키며 이는 하나의 객체입니다.
  단어 그대로 어떤 동작에 대해 선언 되어진 객체인 셈입니다.
  액션은 반드시 type 필드를 가지고 있어야 하며, 그 외의 값은 상황에 따라 넣을 수 있습니다.
  

  // action 1
  {
      type: "NUMBER_COUNT"
  },
  
  // action 2
  {
      type: "CHANGE_INPUT",
      text: "안녕하세요
  }

  type 필드는 쉽게 말해 어떤 동작인지를 표기한 지정 표이다.
  
  
• 액션 생성 함수 (Action Creator)
  이전에 설명한 Action이 동작에 대해 선언된 객체라면, Action Creator는 이 Action을 생성하여 실제로 객체로 만들어 주는 함수입니다.
  
  위 Action 중 action 1 예제의 Action은 아래와 같은 Action Creator를 통해 만들어집니다.
  

  export function numberCount(data) {
      return {
          type: "NUMBER_COUNT",
          number: data
      }
  }

• 리듀서 (Reducer)
  State에 변화를 일으키는 함수입니다. 쉽게 말해 위에 만들어진 Action 등의 일거리를 직접 수행하는 역할을 합니다.
  리듀서는 현재의 state와 Action을 인자로 받아 Store(스토어)에 접근하여 Action에 맞춰 State를 변경(덮어쓰기)합니다.

  function reducer(state, action) {
      switch(action.type) {
          case 'NUMBER_COUNT':
              return state + 1;
          case 'CHANGE_INPUT':
              return state;
          default:
              return state;
      }
  }​

• 스토어 (Store)
  현재 앱의 state와 Reducer 함수, 그리고 몇 가지 내장 함수들을 가지고 있습니다.
  스토어는 State를 수시로 확인하여 변경이 있을 때마다 자신을 구독하고 있는 컴포넌트에게 알려주는 역할입니다.
  
  
• 디스패치 (Dispatch)
  스토어의 내장 함수 중 하나로 리듀서에게 Action을 발생하라고 시키는 것을 말합니다.
  dispatch 함수는 dispatch(action)과 같은 형태로 Action을 인자로 넘겨줍니다.
  
  이렇게 호출 시 스토어가 리듀서 함수를 실행하여 리듀서 함수가 넘긴 액션을 처리해 새로운 상태를 만들어 줍니다.
  
  
• 구독 (SubScribe)
  구독 또한 스토어의 내장 함수 중 하나로 함수 형태의 값을 인자로 받습니다.
  액션이 디스패치 될 때마다 전달 해준 함수를 호출합니다.
  
  유 X 브의 구독을 예로 들면 구독하기를 눌린 BJ의 글이 올라올 때 알림이 뜨는데 이는 이를 계속 주시하고 있기 때문입니다. 이처럼 subscribe도 "스토어를 주시하고 있다가 디스패치 될 때 함수를 호출한다"는 뜻입니다.

  [ 리듀서 사용 시 지켜야 하는 규칙 ]  

 

1. 하나의 애플리케이션은 하나의 스토어만 가진다.
하나의 애플리케이션에는 단 하나의 스토어만을 만들어 사용합니다.

여러 개의 스토어를 사용할 수도 있지만, 권장하지 않는 사항입니다.

 

2. 상태는 읽기 전용이다.

기존의 state 고유 값은 수정하지 않고 새로운 state를 만들어 이를 수정하는 방식으로 업데이트합니다.

이는 리덕스 고유의 불변성을 지키기 위함입니다.

3. 리듀서는 순수 함수여야 한다.

리듀서는 이전의 상태와 액션 객체를 파라미터로 받아야만 하며 이전의 상태는 절대로 건드리지 않고

변화를 일으킨 새로운 상태 객체를 만들어 반환해야 합니다.

즉, 동일한 파라미터로 호출된 리듀서는 언제나 같은 패턴의 결과값을 반환해야 한다는 뜻입니다.

 

더 자세한 내용은 아래 게시물 참고!

3주차 - 리덕스, 리덕스를 통한 리액트 상태관리

---

[ React ] 리액트 리덕스(Redux)란?