❗️Redux 자체는 오래 된 라이브러리이므로 이 자체를 사용하여 무언가를 구현한다는 것보단, 상태관리를 포함한 기본적인 개념들을 포스팅하는 글임을 알린다.
1. Redux 란?
JavaScript 상태관리 도구 중 하나이다.
보통 React 에서 많이 사용하다 보니 Redux 란 곧 React 의 상태관리 라이브러리 중 하나로 착각하기 쉽다.
엄밀히 말하자면 Redux 는 Node.js 의 모듈이며, 때문에 JavaScript 라는 언어의 상태(state)를 관리하는 도구 중 하나이다.
2. 상태 관리 도구 ?
🙋♂️ 상태(state)가 뭔데요 ?
- 프로그램이나 애플리케이션의 특정 시점에서 데이터의 현재 상황이나 조건을 나타내는 값 또는 집합을 의미한다.
- 프로그램이 실행되는 동안 변할 수 있으며, 이를 통해 애플리케이션의 동작과 흐름을 제어할 수 있다.
간단히 말해 React 에선 컴포넌트(Component) 안에서 관리되는 것이다.
아래 예시처럼 state 는 ExComponent 컴포넌트 안에서 관리되는 상태(state) 이다.
const ExComponent = () => {
const [state, setState] = useState('');
return (
<View>
<Text>{state}</Text>
</View>
)
}🙋♂️ 그래서 왜 필요한데요 ?
1. 데이터 전달 방식
기본적으로 데이터를 주고받을 때, 자식 컴포넌트들끼리 다이렉트로 데이터를 주고 받을 수 없다.
즉, 부모 컴포넌트 로부터 props 라는 속성을 통해 주고 받아야 한다.
그런데 자식 컴포넌트가 많아진다면, 상태관리가 매우 복잡해진다.
2. Props drilling 이슈
위 1번에서 언급했듯이, 구조적으로 상위 컴포넌트로부터 하위 컴포넌트로 데이터가 흐른다.
그런데, A컴포넌트에서 G컴포넌트로 전달하기 위해 중간에 불필요한 B~F컴포넌트를 거쳐야 한다면??
즉, 불필요한 컴포넌트들 사이에 의존성이 발생한다.
✅ 따라서, 상태를 중앙에서 관리하고 필요한 컴포넌트에게 직접 데이터를 전달하는 방식을 채택하게 된다.
Redux, MobX, Context API 등 여러 가지 상태 관리 도구가 존재하고, 이러한 도구들의 공통적인 목적은 중간 컴포넌트를 거치지 않고 필요한 컴포넌트에게 데이터를 직접 전달하는 것이다.
🙋♂️ 어떤 문제가 해결돼요?
1. 전역 상태 저장소 제공
방금 언급했듯이, 중앙에서 모든 상태를 관리하는 저장소를 갖는다.
2. 필요한 컴포넌트에 데이터 직접 전달
Props drilling 이슈를 해결한다. 굳이 필요하지 않은 컴포넌트가 종속되어 전달되는 것이 아니라, 필요한 컴포넌트에 store 에서 데이터를 직접 건내준다.
3. Redux 기본 개념
딱! 네 가지 기본 개념만 알면 된다.
1) 🧺 store
store 란, 상태가 관리되는 오직 '하나'의 공간이다.
즉, 상태 정보가 필요할 땐 항상 이 store 에 접근한다.
2) 🏃♀️action
action 이란, store 에 가져다줄 데이터를 담고있다.
한마디로 store 에 어떠한 데이터를 담을 것이라는 주문서와 같다.
보통 아래와 같이 객체 형식으로 되어있다.
{
type: 'ACTION_NAME',
payload: {
name: 'whkwon',
item: 'velog',
}
};3) 🚛 reducer
reducer 란, store 와 action 사이에 있는 중간 매개체이다.
action 은 store 에 데이터를 바로 전달하는 것이 아니다.
actionc 은 반드시 reducer 를 거쳐서 전달해야 한다.
즉, reducer 가 action 의 주문을 확인하고 최종적으로 store 의 상태를 업데이트하는 것이다.
4) 🧫 dispatch
dispatch 란, action 이 가지고 있는 데이터 객체를 reducer 에게 전달하기 위해서 필요한 매개체이다.
가면 갈수록 매개체가 늘어나고 있는데,, 정말 마지막이다.
action 이 store 에 직접 접근할 수없어 중간에 reducer 라는 매개체를 이용한다고 했다.
하지만, 이 역시 action 이 reducer 를 이용하기 위해선 또 하나의 매개체가 필요한데, 그 것이 바로 dispatch 이다.
dispatch 는 단순히 메소드이다.
🧹 정리
지금까지 설명한 개념들을 모식적으로 표현하면 다음과 같다.
action ➡️ dispatch(action) ➡️ reducer ➡️ store
❗️중요한 것은, 위 스텝이 동기적으로 실행된다는 것이다.
그래서 익히들 알고있는 thunk , saga 와 같이 비동기적인 실행을 도와주는 미들웨어가 나오게 된 배경이기도 하며, 다른 상태 관리 도구와 차별화 된 Redux의 가장 큰 장점이라고 할 수 있다.
🔔 참고
미들웨어를 사용하면 action 의 데이터 객체가 reducer 에서 처리되기 전에 어떠한 비동기적인 작업을 수행한 후, reducer 에서 함께 처리 된다.
4. 실습
먼저, 라이브러리를 설치하고 importing을 하자
설치
$ yarn add redux
importing
import { createStore } from 'redux';하지만, createStore
대충 내용을 요약하자면, Redux 팀에서 만든 새롭고 더욱 강력한 기능을 가진 @reduxjs/toolkit 이라는 것이 있다. 거기서 createStoreconfigureStore 라는 것을 제공하니 되도록 이 라이브러리로 교체해서 쓰라는 것이 주 내용이다.
현재 Redux를 사용 못하는 것이 아니라, 더 강력한 라이브러리가 있으니 그 걸 사용하라는 것이 Redux 팀의 제안이다.
이 포스트의 전제를 말했듯이, 우리는 이 Redux 라이브러리를 잘 쓰기 위한 용도가 아니라 이 라이브러리가 어떻게 동작하는지 알기위한 용도이기에 계속 작성을 이어가도록 하겠다.
(@reduxjs/toolkit 에 대해선 다음 포스트에서 다루도록 하겠다.)
상태의 초기값을 설정하고 action , reducer , store 를 생성해보자.
import { createStore } from 'redux';
const initialState = {
name: 'none',
};
const action = name => {
return {
type: 'ACTION_NAME',
payload: name,
};
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ACTION_NAME':
return Object.assign({}, state, { ...state, name: action.payload });
default:
return state;
}
};
const store = createStore(reducer);세팅은 끝났다.
이제 state 를 직접 업데이트 해보면서 store 가 어떻게 바뀌는지 확인해보자
// state 변경 전
console.log(store.getState());
// state 변경!!
store.dispatch(action('whkwon'));
// state 변경 후
console.log(store.getState());store 의 메소드 중 하나인 dispatch 를 이용하여 안에 어떤 action 객체 인지 기입 후 실행하면 reducer 에 접근하여 store 를 최신 상태로 업데이트한다.
결과는 다음과 같다.
# state 변경 전
{ name: 'none' }
# state 변경 후
{ name: 'whkwon' }