리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리 입니다.
리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다.
리덕스의 개념
리덕스의 대해서 알아보도록 하겠습니다.
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. 순수한 함수
변화를 일으키는 리듀서 함수는 순수한 함수여야 합니다.
순수한 함수의 조건은 다음과 같습니다.
- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받습니다.
- 파라미터 외의 값에는 의존하면 안됩니다.
- 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환합니다.
- 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환 해야 합니다.
참고자료
리액트를 다루는 기술
