Redux란
리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리입니다.
리덕스는 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜서 상태를 더 효율적으로 관리할 수 있게 해줍니다.
리액트와 이름이 비슷해서 오해할 수 있지만, 리덕스는 리액트의 하위 라이브러리가 아닌 독립적인 상태관리 라이브러리입니다.
Redux의 3가지 원칙
- Single source of truth : 하나의 저장소(store)가 존재하고, 애플리케이션의 모든 상태들이 이 곳에 저장됩니다.
- State is read-only : 읽기 전용인 상태를 변경하기 위해서는 action이라는 객체를 통해서 상태를 변경할 수 있습니다.
- Changes are made with pure functions : action에 의해 상태를 변경시키기 위해서는 순수함수인 reducer 함수를 통해서 변경시킬 수 있습니다. reducer 함수는 직접 작성해야 하고, 새로운 상태 객체를 만들어 반환해야 합니다.
아래의 문장은 리덕스의 메커니즘을 간략하게 알려줍니다.
“action 객체가 dispatch라는 메소드에게 전달되고, dispatch가 reducer 함수를 호출해서 새로운 state 값을 만들어낸다.”
다음은 생활코딩님의 강의 슬라이드입니다.
기존의 상태관리
App의 자식 컴포넌트인 A 컴포넌트에서 이벤트로 상태를 변경하고, 그 상태를 App의 또 다른 자식 컴포넌트인 B 컴포넌트에게 넘겨주어야 할 시에, 자식 컴포넌트끼리는 대화를 할 수 없기에 모든 상태를 부모 컴포넌트에서 관리를 해야 했습니다.
또한 상태를 변경할 때의 함수를 자식 컴포넌트에게 props로 전달을 해주어야 했죠.
하지만 앱의 규모가 커진다면 코드가 복잡하게 꼬일 수 있고, 코드를 유지보수하는 것도 매우 힘들어질 것입니다.
이러한 경우에 애플리케이션의 상태를 효율적으로 관리하게 해주는 라이브러리가 바로 Redux입니다.
리덕스를 통한 상태관리
!!! 리덕스는 상태관리를 컴포넌트 바깥에서 가능하게 합니다.
리덕스에서 중요한 몇가지 개념을 간략히 살펴보겠습니다.
store
리덕스 라이브러리를 적용하게 되면 store라는 저장공간이 생깁니다. store는 프로젝트의 모든 상태 관련 로직을 보관합니다.
action
action은 상태를 변경시키기 위한 객체입니다. 컴포넌트에서 이벤트가 발생하여 상태가 변경될 때, action객체가 dispatch라는 메소드에게 전달되는데요, action객체는 필수적으로 type이라는 속성을 가져야 하고, 그 type에 따라 상태를 어떻게 업데이트해야 할 지가 결정됩니다.
dispatch
store의 내장함수 중 하나입니다. dispatch는 action을 발생시킨다고 보면 됩니다. action 객체를 파라미터로 하여 호출하면, 스토어는 리듀스 함수를 실행시켜 새로운 상태를 만들어줍니다.
reducer
action객체가 store에 전달될 시 어떻게 상태를 업데이트해야 하는 지를 정의해주는 함수입니다.
직접 구현해야 하는 함수이지요. redux에서 가장 어려운 부분이라고 할 수 있습니다.
보통 action의 type에 따른 switch~case~break 구문을 사용합니다.
