Redux

 

이미지 출처: Redux 공식문서

Redux란?

A ➡️ B ➡️ C ➡️ D ➡️ E의 순서로 연결되는 컴포넌트들이 있다고 생각해보자. 만약 A에서 E로 접근하여 state값을 사용하려 한다면, A부터 E로 접근했다가 다시 E에서 A로 차례대로 돌아와야 하는 굉장히 비효율적인 패턴을 반복하게 된다. 이런 상황에서 Redux는 상태 관리 라이브러리로 복잡한 컴포넌트 구조속에서 간편하게 전역에서 state를 쉽게 공유할 수 있게 해준다.

 

키워드부터 정리하고 가자

액션(Action)

state에 어떤 변경이 필요할 때, 액션이라는 객체를 발생시킨다. 단어 뜻 그대로 어떤 동작에 대해 선언된 객체라고 생각하면 된다. 액션은 반드시 type을 가지며, 그 외의 값들은 자유롭게 넣어줄 수 있다. 아래의 코드 예시를 참고해보자!!

// action 첫 번째 예시
{
 type: 'INCREMENT' // type은 필수적으로 가져야 한다!!
},

// action 두 번째 예시
{
 type: 'STUDY_REDUX',
 data: {
  id: 1,
  text: '이렇게 상황에 따라 다른 값을 넣어줄 수 있다.'
 }
}

action은 어떤 동작인지 표기하는 설명서?? 구체적으로 어떤 동작을 하는지 식별해주는 '지정표'라고 생각하면 이해하기 쉽다. 

액션 생성 함수(Action Creator) 

동작에 대해 선언된 객체가 action이라면, 액션 생성 함수는 action을 생성해 parameter를 받아와서 객체로 만들어주는 함수다. 예시를 확인해보자.

// action 첫 번째 예시와 같이 확인해주세요.
// action creator 예시
function counter() {
 return {
  type: 'INCREMENT',
 }
}

//화살표 함수 예시
const counter = () => ({
 type: 'INCREMENT',
})

// action 두 번째 예시와 같이 확인해주세요.
// action creator 예시
function example(data) {
 return {
  type: 'STUDY_REDUX',
  data,
 }
}

//화살표 함수 예시
const counter = (data) => ({
 type: 'STUDY_REDUX',
 data,
})

 

리듀서(Reducer) 

state에 변화를 주는 함수를 리듀서라고 한다. 간단히 말해 위에서 생성된 action의 일거리를 직접 수행하는 함수라고 이해하면 좋다. 예시부터 확인해보자. 

// 앞선 예시코드와 함께 확인해주세요.
// 초기 상태 정의
const initialState = {
 number: 0
}

// reducer 예시
function reducer(state = initialState, action) {
 switch(action.type) {
  case 'INCREMENT' : //위에서 선언한 액션 type의 이름을 확인할 수 있다.
   return {
    ...state,
    number: state.number + 1,
   };
  default:
   return state;
 }
}

위와 같이 리듀서는 현재의 state와 action 객체를 paremeter로 받아 스토어에 접근하여 action에 따라 새로운 state로 리턴한다.

 

스토어(Store) 

스토어 안에는 현재의 state와 리듀서가 포함되어 있으며, 이밖에도 몇 가지 내장 함수가 있다. 스토어는 한 애플리케이션 당 하나의 스토어를 가질 수 있다.

 

디스패치(dispatch) 

스토어의 내장 함수 중 하나. dispatch 함수는 액션 객체를 넘겨줘서 state를 변경할 수 있는 유일한 방법이다. 단순하게 정리하면, 리듀서에게 action을 발생하라고 전달하는 함수라고 이해하면 된다. action은 dispatch 함수의 parameter로 전달된다.

dispatch(action) // 이런식으로 말이다.

 

구독(subscribe) 

dispatch와 마찬가지로 스토어의 내장 함수 중 하나다. 이 함수는 함수 형태의 값을 parameter로 받아온다. 일단 예시를 참고해보자.

const example = () => {
 console.log('state updated')
}

const unsubscribe = store.subscribe(example)

unsubscribe() // 구독 취소... 추후에 구독을 비활성화할 때, 함수를 호출

위와 같이 example 함수를 parameter로 넣어서 호출하게 되면, state가 변경될 때마다 호출되는 개념이다. 예를 들어 유튜브 구독과 알림을 하는 경우 채널 운영자가 게시물을 업로드하는 순간, 우리에게 별도의 알림이 오는 경험을 해봤을 것이다. 이렇게 곧바로 알림이 울리는 이유는 게시물의 상태를 계속하여 주시하고 있었기 때문이다. 이와 같이 subscribe 함수도 스토어를 항상 주시하고 있다가 action이 dispatch될 때마다 함수를 호출한다. 일종의 이벤트 리스너 느낌이다! 적절한 예시가 되었으면 좋겠다!!

 

여기까지 Redux에 대한 기본 개념을 정리해봤다. 다음 시간엔 Redux의 동작 과정을 포함하여 추가 내용을 더 정리해보고, 간단한 예제를 통해 직접 활용해보는 포스팅을 정리해보겠다.