리덕스를 사용하는 이유
리엑트를 사용하다보면 불편한점을 느끼게된다. 여러 불편한점이 있는데 가장 불편한점은 리엑트는 부모에서 상태를 관리하기 때문에 자식이 부모의 데이터에 접근하려면 부모가 props로 자식까지 가는 길에 있는 컴포넌트에게 전달 또 전달해서 자식에게 도달해야한다는 점이다. 또한 자식이 부모의 상태를 바꾸려할때도 마찬가지다. 이벤트함수를 자식까지 내려보내준다음 다시 가져오는 수고를 들여야한다.
처음 컴포넌트가 많이 없을때는 그렇게 불편한점을 느끼지 못했는데 점점 컴포넌트가 많아지고 깊이가 깊어지니 불편함을 크게 느끼기 시작했다.
컴포넌트가 복잡하면 복잡할수록 효율을 보이는 리덕스!
오늘은 리덕스에 대해 정리해보면서 알아보는 글을 적어볼까합니다.
리덕스란
리덕스 공식문서를 들어가보면 처음 보이는게 A Predictable State Container for JS Apps 다
JS 앱을위한 예측 가능한 상태 컨테이너라는 건데 이 말만보고는 이해하기 힘드니 컴포넌트 깊이가 아무리 깊어도 바로 상태를 관리하는 스토어에 직접 접근해 상태를 변경하거나 사용할 수 있다고 이해하면 편할 것 같다.
리덕스의 데이터 흐름
리덕스에서 중요한 키워드를 따로 뽑자면
- store
- state
- reducer
- dispatch
- action
- subscribe
로 나눌 수 있을 것 같다. 밑에서 차례대로 설명을 해보도록 하겠습니다!
Store
리덕스의 store는 상태를 저장하는 공간이라고 생각하면 될 것 같다.
하나의 프로젝트에는 하나의 스토어라는 규칙이 있다고 한다.
컴포넌트들은 리덕스의 스토어에 접근해 특정한 규칙을 이용해 스토어의 상태를 변경할 수 있고 상태를 가져와서 사용할 수도 있다. 특정한 규칙은 다른 곳에서 이어서 설명하도록 하겠습니다.
EX:
//리덕스를 따로 사용할 경우
store.getState()
//를 통해 스토어안의 데이터에 접근할 수 있다
//리엑트와 함께 사용할 경우
import { useSelector } from 'react-redux'
useSelector(state => state) //를 통해 스토어안의 데이터에 접근할 수 있고
//조금 응용한다면 구조분해 할당으로 이와 같이 사용할 수 있다.
const { name, age } = useSelector(state => ({
name : state.name,
age: state.age
}))
State
리덕스의 state는 리엑트의 state와 비슷한 거라 생각하면 될 것 같다. 리덕스도 리엑트와 마찬가지로 직접 state를 변경하는 것은 금하고 있다.
dispatch
dispatch는 밑에서 설명할 reducer을 호출하는 함수다. dispatch 안에는 action 객체가 실려서 reducer에게 전달되고 스토어의 상태를 변경할때 사용한다.
dispatch({ type : 'CHANGE_VALUE', value : 10 })
//리엑트의 함수형 컴포넌트 안에서 사용하려면 아래와 같이 사용할 수 있다.
import { useDispatch } from 'react-redux'
const dispatch = useDispatch();
dispatch({ type : 'CHANGE_VALUE', value : 10 })action
action은 바로 위에서 설명한 dispatch에 실려 리듀서에게 전달되는 객체다. action 객체는 자신을 가르키는 type이 필수로 존재해야한다. type 뒤에는 뭐가 들어가도 상관없다. 주로 전달하고 싶은 데이터가 들어간다. type의 value는 주로 대문자로 사용하는 것 같다.
EX:
{ type : 'CHANGE_VALUE', value : 10 }reducer
reducer는 state와 action을 받는 함수다.
action을 받아 type과 일치하는 업무를 수행하고 결과값을 원본 state을 수정하는 것이 아니라 원본 state를 새로운 state로 덮어 씌우는 방식을 사용한다.
그 덕분에 redux dev tool을 이용해 변경하기 전 state를 확인 할 수 있는 타임머신기능을 이용 할 수 있어 디버깅에 유리하다.
subscribe
subscribe은 해석과 동일하게 구독이라는 의미를 가진다. 구독을 한 컴포넌트는 상태가 변경될때 마다 최신 상태를 다시 랜더 받는다. 이러한 구독 기능으로 최적화 작업에 유리하다.
