Redux를 배워보기 전에
Redux란 무엇일까?
Redux란 리액트 상태 관리 라이브러리입니다. 왜 상태 관리를 Redux 라이브러리를 이용해서 할까요? 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리해서 효율적으로 관리할 수 있기 때문인데요.
Redux 없이 상태 관리를 한다면(Context API 및 기타 라이브러리로 할 수 있습니다) Props Drilling 문제로 골머리를 앓을 수 있습니다.
Context API랑 무엇이 다를까?
이야기를 하기 전에 Context API 개념에 대해서 알아보고 오시면 좋을 것 같습니다.
Props Drilling의 해결: Context API
결론부터 말하면 프로젝트가 큰 규모라면 리덕스를 사용하고, 상태 관리가 많은 수가 아니라면 Context를 사용하면 됩니다.
Redux
Redux의 키워드를 알아보자
Redux를 사용하기 전 꼭 알아야할 키워드들이 있습니다.
액션
어떠한 상태값이 있고, 상태값을 변화시킬 때 액션값이 발생합니다. 액션은 하나의 객체로 표현되며, 액션 객체는 type 필드를 가지고 있어야 합니다. 이 type 필드를 액션의 이름으로 생각해도 무방하며 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값입니다.
다음과 같이 사용합니다.
{
type: 'ADD_TODO'
data: {
id: 1,
text: 'text',
}
}액션 생성 함수
상태값에 변화를 유도할 때 액션이 발생되어야 한다고 했는데요. 이런 변화를 만들 때마다 액션 객체를 생성해야 하는데, 일일이 직접 만들기는 번거롭습니다. 때문에 함수를 만들어서 관리하는데, 이 함수를 액션 생성 함수라고 합니다.
다음과 같이 사용합니다.
/* 일반 함수 */
function addTodo(data){
return {
type: 'ADD_TODO',
data,
}
}
/* 화살표 함수 */
const addTodo = data => ({
type: 'ADD_TODO',
data,
})리듀서
리듀서는 직접적으로 상태의 변화를 만드는 함수인데요. 앞서 말한 액션 생성 함수로 액션을 만들어서 발생시키면 리듀서는 현재 상태와 전달받은 액션 객체를 파라미터로 받아옵니다. 두 값을 참조해 새로운 상태값을 반환합니다.
다음과 같이 사용합니다.
/* initial State */
const initialState = {
counter: 0,
}
/* reducer */
function reducer(state = initialState, action){
switch(action.type){
case INCREASEMENT:
return { counter: state.counter + 1 };
default:
return state;
};
}스토어(Store)
프로젝트에 리덕스를 적용시키기 위해서는 스토어(store)가 필요합니다. 한 개의 프로젝트에는 하나의 스토어만 가질 수 있습니다. 보통 rootReducer로 모든 reducer를 병합하는데, 이는 추후에 보겠습니다. 스토어 안에는 현재 애플리케이션의 상태와 리듀서가 들어가 있습니다.
디스패치(dispatch)
디스패치는 스토어의 내장 함수 중 하나입니다. 디스패치는 ‘액션을 발생시키는 것’ 이라고 보면 됩니다. dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출합니다.
구독(Subscribe)
스토어의 내장 함수 중 하나로, subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해줍니다. 이때 리스너 함수는 액션이 디스패치되고 상태가 업데이트될때마다 호출됩니다. 구독은 바닐라 자바스크립트에서만 사용됩니다.
해당 글은 리액트를 다루는 기술(김민준, 벨로퍼트)을 정리한 요약본입니다.
- 리액트를 다루는 기술 - Redux
