[React] Redux 기본 개념

Redux란

---

• 가장 사용률이 높은 상태 관리 라이브러리
• 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜서 더욱 효율적으로 관리 가능
• 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.
• 상태변화 로직이 들어있는 스토오를 통하여, 우리가 원하는 컴포넌트에 원하는 상태값과 함수를 직접 주입할 수 있다.

Redux에서 자주 사용되는 개념 정리

---

액션

1 2 3 4 5 6 7

{   type : "ADD_TODO",   data : {     id : 0,     text : "리덕스 배우기"    } }

cs

• 상태에 어떠한 변화가 필요하게 될 때 액션이라는 것을 발생시킨다.
• 하나의 객체로 표현하며 액션 객체에는 type필드는 필수로 들어가야한다.
• 그 외 data는 사용자 마음대로 조정이 가능하다.

액션 생성함수 (Action Creator)

1 2 3 4 5 6

export const addTodo = (data) => {     return {       type: "ADD_TODO",       data     }; } Colored by Color Scripter

cs

• 액션을 만드는 함수다.
• 파라미터를 받아와 액션 객체 형태로 만들어주는 책임이 있다.
• 액션 생성함수를 통해 액션을 생성하는 이유는 따로 있다.
• 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해서다.
• 때문에 보통 함수 앞에 export 키워드를 통해 다른 파일에서 불러와서 사용한다.
• 액션 생성함수는 필수적으로 구현요소가 아니다.
• 액션을 발생 시킬 때 마다 직접 액션 객체를 작성해도 괜찮다.

Reducer

function addTodo(state, action) {
  switch (action.type) {
    case 'ADD_TODO' :
      return state.concat(action.todo);
    default :
      return state;
  }
}

• 리듀서는 state의 변화시키는 역할을 한다.
• 2가지 파라미터를 받는다.
• 첫번째를 파라미터는 현재 state값, 두번째 파라미터는 변화를 시키고자 하는 액션 객체
• 이 2가지 파라미터를 받아 새로운 state를 만든다.
• 리덕서 리듀서에서는 default문에서는 기존 state를 반환하도록 작성한다.
• 리덕스를 사용할 때 여러개의 리듀서를 만들고 이를 하나의 루트 리듀서(Root Reducer)로 만들 수 있다.

Store

• 리덕스에서 한 애플리케이션에 하나의 스토어를 만들게 된다.
• 스토어 안에는 현재 앱 상태, 리듀서가 들어있다.
• 내장 함수도 포함되어 있다.

Dispatch

• 디스패치는 스토어의 내장함수 중 하나다.
• 디스패치는 액션을 발생 시키는 역할을 한다.
• dispatch 함수에 액션을 파라미터로 전달한다.
• 디스패치 함수를 호출하게 되면 스토어는 리듀서 함수를 실행시킨다.
• 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

Subscribe

• 스토어의 내장함수다.
• 함수 형태의 값을 파라미터로 받는다.
• 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.