리액트 입문기 - 리덕스

rkgus3575·2021년 1월 14일
0

React

목록 보기
11/12

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리 입니다.

리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다.


리덕스의 개념


리덕스의 대해서 알아보도록 하겠습니다.

1. 액션객체
상태에 어떠한 변화가 필요하면 액션이란 것이 발생합니다,
액션 객체는 type필드를 반드시 가지고 있어야 합니다.

** * 액션객체표현 예 **

function reduxType(add){
return {
type: 'ADD_TODO',
data
}
}

2. 리듀서
리듀서는 변화를 일으키는 함수입니다.
액션을 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옵니다.

리듀서는 다음과 같은 형태를 가지고 있습니다.

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

3. 스토어
프로젝트에 리덕스를 적용하기 위해 스토어를 만듭니다.
한개의 프로젝트에는 하나의 스토어만 생성할 수 있습니다.

4. 디스패치
디스패치는 스토어의 내장함수 중 하나입니다.
디스패치는 **'액션을 발생시키는 것'**이라고 이해하면 됩니다.

이 함수는 dispatch(action)과 같은 형태로 액션객체를 파라미터로 넣어서 호출합니다.
이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줍니다.

5. 구독
구독은 스토어의 내장함수 중 하나입니다. subscribe함수안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될때마다 호출됩니다.


리덕스의 3가지 규칙


리덕스 프로젝트를 사용할 때 지켜야 하는 3가지 규칙에 대해 알아보겠습니다.

1. 단일 스토어
하나의 애플리케이션에는 하나의 스토어만 가져야 합니다.

2. 읽기 전용 상태
리덕스 상태는 읽기 전용입니다.
상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 합니다.

3. 순수한 함수
변화를 일으키는 리듀서 함수는 순수한 함수여야 합니다.
순수한 함수의 조건은 다음과 같습니다.

  • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받습니다.
  • 파라미터 외의 값에는 의존하면 안됩니다.
  • 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환합니다.
  • 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환 해야 합니다.


참고자료
리액트를 다루는 기술

profile
안녕하세요. 노드로 개발하는 마운틴러버 개발자 입니다.

0개의 댓글