Redux_(1) 라이브러리 이해하기

임쿠쿠·2020년 11월 11일
0

리덕스

목록 보기
1/3
post-thumbnail

들어가기전에..

그동안 React를 배우면서 하위 컴포넌트에 props, state를 통해 값을 전달했다. 하지만, 컴포넌트들이 많아지고 여러 컴포넌트를 거치면서 상태를 공유해아한다는 문제점을 발견했다. 이를 해결하기 위해 전역 상태 관리 도구인 Redux를 배워보려고 한다.

Redux 개념 정리

[액션]

상태에 어떠한 변화가 필요하면 액션이란 것이 발생하며 이는 하나의 객체로 표현된다. 액션 객체는 다음과 같은 형식으로 이루어져 있다.

{
 type: 'TOGGLE_VALUE
}

액션 객체에는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 보면 된다.
또한, 어떤 변화가 있을 때 마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있으므로 함수로 만들어서 관리하는 것이 좋다.

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;
  }
}

[스토어]

프로젝트에 리덕스를 적용하기 위해 스토어를 만든다. 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그외에도 몇 가지 중요한 내장 함수를 지닌다.

디스패치 : 디스패치는 스토어의 내장 함수 중 하나이다. 디스패치는 '액션을 발생시키는 것'이라고 볼 수 있다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출 한다. 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 준다.

구독 : subscribe도 스토어 내장 함수 이다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출 된다.




참고 - 리액트를 다루는 기술(김민준)

profile
Pay it forward

0개의 댓글