Redux(리덕스)란? 상태 관리 도구 리덕스에 대해 알아보자

리덕스란?

자바스크립트 상태 관리 라이브러리

 

상태 관리 도구

상태란?

리액트에서 상태(State)는 컴포넌트 안에서 관리되는 것

 

상태 관리 도구가 필요한 이유?

리액트에서 자식 컴포넌트들 간의 다이렉트한 데이터 전달은 불가능하다. 따라서, 자식 컴포넌트들 간에 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. (props)

그렇지만 자식이 많아지면 상위 컴포넌트에서 props를 계속 내려 받아야 하는 불편함이 생긴다. (Props Drilling)

 

상태 관리 도구를 사용한다면 전역 상태를 저장하는 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있게 되어 이러한 문제를 해결할 수 있다.

 

리덕스 구성 요소

 

Store

- 상태가 관리되는 공간 (Store는 앱 안에서 한 개이다.)

- 컴포넌트에서 상태값이 필요할 때 Store에 접근해서 사용

- createStore를 사용해서 생성

 

Action

- 일어나는 일에 대해 설명하는 자바스크립트 형식의 객체

- 앱에서 스토어에 운반할 데이터를 가리키며, 이는 주문서와 같은 역할을 한다.

- 상태에 변화가 필요할 때, action 발생

{
  type: 'ACTION_CHANGE_USER', // 필수, 액션의 이름이라고 보면 됨
  payload: { // 옵션, 나중에 상태 업데이트 시 참고할 값으로, 마음대로 작성하면 됨
    name: '피카츄',
    age: 100
  }
}

 

Action creator

- 액션 생성 함수

 

Reducer

- 변화를 일으키는 함수, 즉 데이터(state)를 수정하는 함수

- Action을 Store에 바로 전달하는 것이 아니라, Reducer에 전달하면 Reducer가 주문을 보고 Store의 상태를 업데이트 하는 것이다.

- 이때, Action을 Reducer에 전달하기 위해서 dispatch() 메소드가 사용된다.

const counter(state=initialState, action) {  // 현재 상태, 전달받은 액션객체 이 두 가지를 파라미터로 받음
    switch(action.type) {
        case INCREMENT:
            return {
                ...state,
                number: state.number + 1 ,
            } ;
        case DECREMENT:
            return {
                ...state,
                number: state.number - 1,
            } ;
        default:
            return state ;
    }
}

 

useSelector

- selector를 통해 Store의 원하는 상태값에 접근해서 가져올 수 있다.

 

useDispatch

- Action 객체가 dispatch에 전달되고, dispatch를 통해 Reducer를 호출하여 액션을 발생시킨다.

 

리덕스의 세 가지 원칙

1. 동일한 데이터는 항상 동일한 곳(Store)에서 가져온다.
2. 리덕스 상태는 읽기 전용이다.
3. 변화를 일으키는 Reducer 함수는 순수 함수여야 한다.

 

> 여기서 순수함수란?

리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는데, 파라미터 외의 값에는 의존하면 안된다. 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.(불변성 유지) 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다. 

이 조건들을 만족하는 함수를 순수한 함수라고 한다.