[React] Redux 상태 관리 라이브러리

Redux ?

Redux란 2015년에 Dan Abramov씨와 Andrew Clark씨에 의해 작성된 상태 관리 라이브러리이다.

Flux 아키텍처 의 영향을 받아 프론트 엔드에서의 데이터 관리를 쉽고 견고하게 해준다.

 

 Store ：상태를 관리하는 곳 즉 저장소

 Reducer ：상태를 변화 시키는 곳 , 즉 변수를 저장하는곳

 Actions ：상태를 변화시키는 함수 , 이름처럼 뭔가 액션을 취하는곳

 

리액트에서 리덕스를 사용하려면 redux와 react-redux를 설치해야 한다.

또한 액션 생성 함수를 작성할 수 있도록 하기 위해 추가적으로 redux-thunk를 설치해야 한다.

 

상태 ?

상태 영어로 state.

state는 유동적으로 변할 수 있는 데이터를 의미한다.

---

 

리덕스에서 사용되는 키워드 ?

 

액션 (action)

상태에 어떠한 변화가 필요하게 될 때 우리는 액션이란 것을 발생시킨다.

이는 하나의 객체로 표현되는데 액션 객체는 다음과 같은 형식으로 이루어져 있다.

액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외;의 값들은 개발자 마음대로 넣어줄 수 있다.

 

 

---

index.js 초기 설정

리액트의 index.js를 구성할 때 아래와 같은 핵심 부분이 있다.

HTML파일에서 id값이 root인 html태그에 App.js의 내용을 덧붙이는 것을 의미한다.

리덕스를 사용하기 위해서는 ReactDOM.render 부분에서 App.js를 아래와 같은 Provider태그로 감싸주면 된다.

또한  리덕스의 createStore객체를 사용하여 리액트 앱에서 사용할 리덕스 스토어를 생성해줘야 한다. 리덕스 스토어는 각 앱에 한 개씩만 생성하는 것을 권장한다. 물론, 여러개의 리덕스 스토어를 생성할 수 있지만, 여러개의 스토어를 사용하면 리덕스 개발도구를 사용할 수 없고 오히려 상태관리를 할 때 더욱 복잡해질 수 있다. 리덕스의 장점을 유지하고자 상태 관리 스토어는 한 개만 사용하도록 권장된다.

 

---

리듀서 생성

index.js에서 Provider를 감싼 후, 리덕스 스토어를 생성해 주기 위해 reducer들을 생성해줘야 한다. 리듀서를 사용할 때는, modules라는 폴더를 하나 만든 후, 해당 폴더 안에 기능별로 파일을 생성하여 사용한다.

 

// modules/food.js -  food이라는 기능을 가진 리듀서

// 액션
const SET_FOOD_LIST = "food/SET_FOOD_LIST";

// 액션 생성 함수
export const setFruitList = foodList => ({ type : SET_FOOD_LIST, foodList });

// 초기값
const initialState = {
  name: false,
  price: false,
};

// 리덕스 스토어값 변경
export default function fruit(state = initialState, action) {
  switch(action.type) {
    case SET_FOOD_LIST :
      return {
        ...state,
        name: action.foodList,
      };
    default:
      return state;
  }
}

 

• 액션 타입 정의 : 액션의 종류를 분류할 수 있도록 모듈명/액션이름 으로 액션을 정의한다.
• 액션 생성 함수 : 정의된 액션 타입을 바탕으로 실행할 액션함수를 생성한다.
• 초기상태 : 해당 모듈의 리덕스 스토어의 초기값을 나타낸다.
• 리덕스 스토어 값 변경 : 액션 타입이 일치하는 case에 따라 스토어의 값이 변하게 된다. 

---

리듀서 (Reducer)

리듀서는 변화를 일으키는 함수이다. 리듀서는 두 가지 파라미터를 받아온다.

리듀서는 현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어 반환한다.

---

디스패치 Dispatch

디스패치는 스토어의 내장 함수 중 하나이다.

'액션을 발생 시키는 것' 이다.

디스패치 함수엔 액션을 파라미터로 전달한다. (dispatch(action))

호출을 하면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어 준다.

---