[React] Redux

리액트는 컴포넌트의 트리 구조의 형태를 취하고 있고, 상태를 관리하기 위해선 컴포넌트 간의 데이터를 props로 전달합니다. 이때 이러한 상태를 관리하는 방법은 여러가지가 존재하는데 그 중에서 가장 많이 사용되는 방법은 리덕스 라는 리액트 상태 관리 라이브러리를 이용하는 것 입니다. 리덕스를 사용하면 컴포넌트의 상태를 다른 파일로 분리해서 관리하기 때문에 굉장히 효율 적이고, 컴포넌트 간의 상태 공유 시에도 손 쉽게 상태 값을 전달하거나 업데이트 할 수 있습니다.

즉 리덕스는 전역 상태를 관리할 때 굉장히 효율적입니다. 중요한건 리덕스는 리액트에 종속된 라이브러리가 아니라 바닐라 JS 등에서도 사용이 가능하다는 것 입니다.

 

핵심 키워드 - 액션

액션 : 상태에 변화가 필요할 때 하나의 객체의 형태로 액션이 발생합니다.
액션 객체는 type 프로퍼티를 가지고 있는데 이 값을 이용해서 액션을 호출하는 등의 액션의 이름 역할을 합니다. 이러한 액션 객체를 만들어주는 함수를 액션 생성 함수라고 합니다. 즉 상태의 변화에 따라 액션 객체를 생성할 때 매번 번거롭게 생성하는 것 보단 함수를 만들어서 호출하는 편으로 이용하곤 합니다.

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

// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({ 
  type: 'CHANGE_INPUT',
text
});

핵심 키워드 - 리듀서

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

 

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

 

핵심 키워드 - 스토어

프로젝트 등에 리덕스를 적용할 때 스토어를 만들어서 현재 애플리케이션의 상태나 리듀서 또는 각각의 중요한 내장 함수를 가지고 활용합니다. - 이때 1개의 프로젝트는 1개의 스토어만 가질 수 있습니다.

 

 

핵심 키워드 - 디스패치

액션을 발생시키는 함수로 스토어에 내장된 중요 함수 중 1개 입니다. 형태는 dispatch(action) 과 같은 형태로 액션 객체를 파라미터로 넣어서 호출 합니다.

이 함수가 호출된다면 스토어는 리듀서 함수를 실행시켜서 새로운 상태로 만들어 줍니다.

 

핵심 키워드 - 구독

구독도 스토어의 내장 함수 중 1개 입니다. callback 함수처럼 액션이 디스패치로 인해 상태가 변화 될 때마다 호출되는 함수로 subscribe(listener) 의 형태로 구독 함수 안애 리스너 함수 파라미터를 넣어서 호출합니다.

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

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

 

 

액션 : 상태의 변화를 시작하게 하는 함수
리듀서 : 실제로 변화를 일으키는 함수
스토어 : 프로젝트에 사용되는 여러 함수를 관리 하는 함수
디스패처 : 액션을 발생 시키는 함수
구독 : 리듀서로 변화가 발생 시 같이 실행되는 함수