Redux로 상태관리 해보기

회사에서 진행하는 프로젝트가 redux를 사용하는 것을 알고 공부를 하면서 이해한 내용을 적어본다.

redux란?

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

redux의 세 가지 원칙

1. Single source of truth

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.
• 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.

2. State is read-only

• 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
• 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. Changes are made with pure functions

• 변경은 순수함수로만 가능하다.
• 리듀서와 연관되는 개념이다.
• Store(스토어) – Action(액션) – Reducer(리듀서)

Store, Action, Reducer

redux 구조

redux는 크게 3가지로 나눌수 있다.

Store

• 상태가 관리되는 오직 하나의 공간

Action

• 어떤 동작을 하는지 객체형태로 정의
• type은 필수로 사용
• payload를 작성해 구체적인 값을 전달

{
   type: 'ADD_TODO',
   data: {
       id: 1,
       text: "Redux Help"
   }
}

 

액션 생성자

// payload가 필요 없는 경우
const increase () => {
  return {
     type: 'INCREASE',
  }
}

// payload가 필요한 경우
const addTodo (todo) => {
  return {
     type: 'SET_TODO',
     payload: todo
  }
}

 

Reducer

할 일을 정의하는 Action, 애플리케이션의 모든 데이터를 저장하는 State, Action과 State를 받아 새 상태를 리턴하는 Reducer를 포함

const reducer =(state,action) => {
 switch(action.type){
 	case CHANGE_INPUT:
    return{
      // 상태 업데이트 로직
      }
    default:
      return state;  
   }
 };

 

useDispatch

액션 생성함수를 실행하여 리덕스 스토어에 변경된 상태값을 저장하기 위해서는 useDispatch라는 리액트 훅을 사용하여 액션을 실행

액션 호출

dispatch( setFruitList( "딸기" ) );

실행할 액션함수명을 적은 후, 해당 액션함수의 파라미터에 변경할 상태값을 추가하고 dispatch로 감싸면 해당 액션을 호출하는 dispatch함수가 완성된다. 파라미터값에는 문자열 뿐만 아니라,  true / false, 정수, json 타입 등 다양한 타입의 내용을 넣을 수 있다.

export const setFruitList = fruistList => ({ type : SET_FRUIT_LIST, fruitList });

액션 함수의 fruitList에는 위에서 추가한 '딸기'라는 값이 들어가게 된다.

 

useSelector

스토어의 상태 값을 반환해주는 역할

useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다

 

사용법

const fruitList = useSelector(state => state.fruit);

useSelector에 매개변수에 state => state.모듈명  형식으로 상태값을 반환할 수 있다. fruit 상태 안에 name, price 등의 요소를 바로 가져오고 싶을 경우, state => state.fruit.name,  state => state.fruit.price 와 같이 요소들을 마침표로 구분하여 상태값을 가져올 수도 있다.

 

useDispatch + useSelector 를 활용한 리덕스 스토어의 장점

리덕스 스토어에 상태값을 관리하기 위해 값을 저장하고 useSelector를 통해 필요한 상태값을 반환하여 적절한 컴포넌트에 사용하여 불필요한 렌더링을 최소화 할 수 있으며, props를 사용할 때의, 복잡함을 단번에 해결할 수 있다.