[React] redux 라이브러리 이해하기

redux

리액트 상태 관리 라이브러리

컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다.

컴포넌트간 공동의 상태에 접근해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 접근할 수 있다.

 

Context API를 통해서도 동일한 작업을 할 수 있다.

리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기에 대규모의 프로젝트에서는 리덕스를 사용하는 편이 더 좋다.

코드의 유지 보수성을 높여주고, 작업 효율도 극대화해준다.

 

1. 액션 (Action)

상태에 어떠한 변화가 필요하면 발생하는 것

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

type에 액션의 이름을 넣고, 그 외의 값들은 마음대로 넣을 수 있다.

 

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

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

function addTodo(data) {
    return {
        type: 'ADD_TODO',
        data
    };
}

const changeInput = text => ([
    type: 'CHANGE_INPUT',
    text
});

어떤 변화를 일으킬때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거롭고, 실수할 수 있어

이를 방지하기 위해 함수로 만들어 관리한다.

 

3. 리듀서 (Reducer)

변화를 일으키는 함수

액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 

그리고 두 값을 참고하여 새로운 상태를 만들어 반환해준다.

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

 

4. 스토어 (Store)

리덕스를 프로젝트에 적용하기 위해 만들어야 함

한 프로젝트는 딱 하나의 스토어만 가질 수 있음

스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇가지 중요한 내장함수를 지님

 

5. 디스패치 (Dispatch)

스토어의 내장함수 중 하나로 액션을 발생시키는 것

dispatch(action) 형태로 액션 객체를 파라미터로 넣어 호출하고, 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만들어줌

 

6. 구독 (Subscribe)

스토어의 내장함수 중 하나로 

리스너 함수를 파라미터로 넣어서 호출해주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될때마다 호출됨

const listener = () => {
    ...
}
const unsubscribe = store.subscribe(listener);

unsubscribe();

 

세가지 규칙

1. 하나의 애플리케이션 안에는 하나의 스토어가 들어 있다.

 

2. 읽기 전용 상태

상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해주어야 한다.

불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문이다.

 

3. 순수한 함수인 리듀서

- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.

- 파라미터 외의 값에는 의존하면 안된다.

- 이전 상태는 절대 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.

- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.