[React] Redux - 기본편

Redux는 React에서 가장 많이 사용되고 있는 상태 관리 라이브러리 중 하나이다. 

최근에는 Redux Toolkit이 새롭게 생긴 김에 다시 정리해본다. 

 

Redux의 주요 개념들

1. Action ( 액션 )

상태가 변화가 필요할 때, 액션이 발생된다. 

{
    type: 'TOGGLE_MODAL',
    data: {
        // ...
    }
}

객체로 되어 있으며, type 속성은 반드시 필요하며, 액션을 구분하는 용도로 사용한다. 

 

2. Action Creator ( 액션 생성 함수 )

액션 객체를 만들어주는 함수이다. 

export const toggleModal = (data) => {
    return {
        type: "TOGGLE_MODAL",
        data,
    }
}

액션 생성 함수를 만들어서 사용하는 이유는 쉽게 컴포넌트에서 액션을 발생시키기 위해서이다. 

 

Redux에서 액션 생성 함수는 필수가 아니며, 직접 액션 객체를 작성할 수 있다. 

 

3. Reducer ( 리듀서 )

변화를 일으키는 함수이다. 

function reducer(state = initialState, action) {
    switch (action.type) {
        case "TOGGLE_MODAL":
            return !modal;
        case "OPEN_MODAL":
            return modal = true;
        case "CLOSE_MODAL":
            return modal = false;
        default: 
            return state
}

현재 상태 ( state )와 전달받은 액션을 참고해서 새로운 상태를 만들어서 반환한다. 

 

4. Store ( 스토어 )

상태가 들어있다. 하나의 프로젝트는 하나의 Store만 가질 수 있다. 

 

5. Dispatch ( 디스패치 )

Store의 내장 함수 중 하나로 액션 객체를 넘겨줘서 상태를 업데이트하는 이벤트 트리거이다. 

 

호출되면, Store는 Reducer 함수를 실행시켜 Action 처리 로직이 있다면 참고해 새로운 상태를 만든다.

 

6. Subscribe ( 구독 )

Store의 내장 함수 중 하나로 리스너 함수를 파라미터로 넣어 호출하면 상태가 업데이트될 때마다 

호출된다. 

const listener = () => {
    console.log("상태 업데이트");
}
const unsubscribe = store.subscribe(listener);

 

Redux의 세 가지 원칙

1. Single Source of truth
   하나의 애플리케이션에 하나의 스토어만 존재한다는 원칙이다. 
   여러 개의 스토어를 사용할 수는 있으나, 권장하지는 않는다. 
2. State is read-only
   상태 변화를 일으키는 방법은 액션을 발생하는 것뿐이다. 
3. Changes are made with pure functions
   변화를 일으키는 리듀서 함수는 순수 함수여야 한다. 순수 함수란
   ① 리듀서 함수는 이전 상태 ( State )와 액션 객체를 파라미터로 받는다. 
   ② 파라미터 외의 값에는 의존하면 안 된다. 
   ③ 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다. 
   ④ 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.