[ 리액트를 다루는 기술 ] 16장 리덕스 라이브러리 이해하기

도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다.

리액트를 다루는 기술(개정판)

---

리덕스는 사용할 때마다 헷갈리고 어려운 것 같다.

이번에 개념적으로 제대로 익히고, 사용하는 방법까지 제대로 알고자 게시글을 작성하게 되었다.

리덕스란?

• 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다.
• 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
• 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다.
• 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것만으로도 충분히 가능하지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 것이 좋다.

리덕스의 장점

1. 코드의 유지 보수성을 높여준다.
2. 작업 효율을 극대화한다.
3. 아주 편리한 개발자 도구를 지원한다.
4. 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있도록 해준다.

리덕스 개념 정리

액션

• 상태에 어떠한 변화가 필요하면 액션(action)이라는 것이 발생한다.
• 이는 하나의 객체로 표현되며, 아래와 같은 형식으로 이루어져 있다.

{
    type : "TOGGLE_VALUE"
}

• 액션 객체는 type 필드를 반드시 가지고 있어야 한다.
• 이 값을 액션의 이름이라고 생각하면 된다.
• 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있다.

// 예시 액션

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

{
    type : "CHANGE_INPUT",
    text : "Hello"
}

액션 생성 함수

• 액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수이다.

const addTodo = (data) => {
    return {
        type : "ADD_TODO",
        data
    };
}

const changeInput = text => ({
    type : "CHANGE_INPUT",
    text
});

리듀서

• 리듀서(reducer)는 변화를 일으키는 함수이다.
• 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다.
• 그리고나서 두 값을 참고하여 새로운 상태값을 만들어서 반환해 준다.

const initialState = {
    counter :1
};

const reducer = (state = initailState, action) => {
        switch(action.type){
            case INCREMENT :
                return {
                    counter : state.counter + 1
                };
            default :
                return state;
        }
}

스토어

• 프로젝트에 리덕스를 적용하기 위해서는 스토어(store)를 만든다.
• 한 개의 프로젝트에는 단 하나의 스토어만 존재할 수 있다.
• 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 지닌다.

디스패치

• 디스패치(dispatch)는 스토어의 내장 함수 중 하나이다.
• 디스패치는 액션을 발생시키는 것이라고 이해하면 된다.
• 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.
• 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어준다.

구독

• 구독(subscribe)도 스토어의 내장 함수 중 하나이다.
• subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해주면, 이 리스너 함수가 액션이 디스페치되어 상태가 업데이트될 때마다 호출된다.

const listener = () => {
    console.log("update");
}

const unsubscribe = store.subscribe(listener);

unsubscribe(); // 추후 구독을 비활성화할 때 함수를 호출

리덕스의 규칙

단일 스토어

• 하나의 애플리케이션 안에는 하나의 스토어가 들어있다.
• 여러 개의 스토어를 만들 수는 있지만, 상태 관리가 복잡해질 수 있기 때문에 권장하는 방법은 아니다.

읽기 전용 상태

• 리덕스는 읽기 전용 상태이다.
• 리덕스 객체의 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해주어야 한다.
• 리덕스의 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문이다.
• 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지할 수 있는 것이다.

리듀서는 순수한 함수

• 변화를 일으키는 리듀서 함수는 순수한 함수어야 한다.
• 순수한 함수는 아래 조건을 만족한다.
  • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
  • 파라미터 외의 값에는 의존하면 안된다.
  • 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
  • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.
• 예를 들어, 리듀서 함수 내부에서 랜덤 값을 만들거나, Date 함수를 사용하여 현재 시간을 가져오거나, 네트워크 요청을 한다면, 파라미터가 같아도 다른 결과를 만들어낼 수 있기 때문에 사용하면 안된다.
  ⇒ 이러한 작업은 리듀서 함수 밖에서 처리해야 한다.
• 액션을 만드는 과정에서 처리해도 되고, 리덕스 미들웨어에서 처리해도 된다.
  ⇒ 주로 네트워크 요청과 같은 비동기 작업은 미들웨어를 통해 관리한다.

정리

• 다음에는 react-redux라는 라이브러리를 사용하여 스토어의 상태를 관리하는 포스팅을 작성하겠다.