리덕스란?
프로그램의 규모가 커지게 되면서 관리해야할 상태들도 많아지고, 복잡도도 커지게 되었다.
Context API를 이용해 구현이 가능하지만 규모가 커질수록 관리하는것은 힘들게된다..
리덕스는 상태관리 라이브러리 중 하나로 여러가지 상태 관리 라이브러리 중 가장 많이 사용된다.
리덕스는 store라는 변수를 사용해 전역 상태관리를 하게된다.
이 스토어를 사용하면 상태를 조회하는것이 간편하고, 관리하는것도 간편해진다.
리엑트 컴포넌트에서 상태를 자식에게 전달하기 위해 props를 전달하고 자식 컴포넌트가 다시 자식컴포넌트에props로 전달하게 되면 불필요한 props전달이 발행하고, 복잡도 또한 올라간다.(props 드릴링 이라고 한다.)
리덕스를 사용할 경우 원하는 컴포넌트에서만 스토어의 값을 사용하여 props드릴링을 없앨 수 있따.
또한 리덕스는 크롬브라우저 확장 프로그램 리덕스 데브툴즈를 지원하기에 이것을 사용해 상태를 조회하고 변경, 추적을 간편하게 하며 원하는 시점을로 변경할 수도 있다.
리덕스에 필요한 개념
Action
상태를 변화시키기 위해 변화에 대한 정보가 필요하다.
액션은 상태 변화에 대해 알려주는 순수 자바스크립트 객체이다.
액션 객체는 상태 변화에 대한 type을 필수로 가지고 있어야한다.
액션의 type은 액션의 행위를 나타내는 문자열이다.
액션 객체의 예시
{type:"ADD_TODO", todo:[]} {type:"CHECK_TODO", id:1}Reducer
리듀서는 상태와 액션을 가지고 함수를 실행하는 역할을 한다.
리듀서는 두가지 인자를 받게되는데
첫째, 이전상태의 정보
둘째, 액션 객체를 받는다.
리듀서는 액션에 대한 함수를 정의하고, 함수를 실행해 상태를 업데이트한다.
Dispatch
디스패치는 액션을 실행시키는 역할을 하며 액션을 인자로 받는다.
디스패치의 발생
- 디스패치로 액션을 실행한다. ex) dispatch(action)
- 리듀서는 이전 상태롸 액션 객체를 받아 스토어 상태를 업데이트 한다. ex)reducer(preState action)
리덕스의 원칙
- 응용 프로그램의 전역상태는 단일 저장소 내의 트리에 저장된다.
- 상태는 읽기 전용이다.
- 순수 함수에 의해 변경되어야한다.
리덕스의 원칙은 리덕스 공식문서에서 자세히 볼 수 있다..
이제 투두리스트에 적용해보자.
