상태관리 라이브러리
- State를 체계적으로 관리하도록 도와주는 라이브러리.
나처럼 꽤나 고수인 사람이 React로 프로젝트를 만들다보면 점점 component가 쌓이게 된다.
그러다보면 사용하고 싶은 state가 저 멀리있는 component에 존재할 때.
정말 골치가 아프다!!!!!
그럴 때 바로 이 상품을 사용해보세요!
당신이 사용하고 싶은, 원하는 data가 어디 있든지!
Store라는 저장공간에 해당 데이터를 저장해주고, 원하는 곳에서 꺼낼 수 있습니다.
마인크래프트 엔더상자가 떠오르네요
아무튼.
store
위에서 말한 저장공간이다.
이 안에 원하는 상태값을 저장해준 뒤, 꺼낼 수 있는 창고같은 존재.
Action
상태변화에 영향을 끼치는 객체이다.
해당 State에 대해 어떤 동작을 할 것인지에 대해 객체형태로 정의한다.
Action 형식
{
type: "NUMBER_COUNT"
data: {
number: 0
}
}여기서 type은 이후 어떤 행동인지 구분을 하기 위한 명칭일 뿐이므로, 어떤 기능인지 알아보기 쉽게 작성하자.
Action 생성 함수
Action을 실행시킬 수 있는 함수의 구조이다.
export function NumberChange(data){
return{
type: "NUMBER_COUNT"
data: {
number: 0
}
}
}해당 함수를 실행하게 되면 Reducer로 위 Action이 넘어가게 된다.
Reducer
Action을 실행시켜주는 함수이다.
State와 Action을 인자로 받아 Store에 접근하여 Action에 맞게 State를 변경해주는 것이다.
function reducer(state, action){
switch(action.type){
case 'NUMBER_COUNT':
return state+1;
}
}이런식으로 액션의 type을 참고해서 상태값을 새롭게 반환해주는 역할이다.
Dispatch
스토어의 내장함수 중 하나로,
reducer에게 특정 액션을 발생시키는 함수이다.
생각해보면 가장 먼저 component에서 Store로 접근하는 함수이다. 이놈이 문제였네
Subscribe
이놈도 스토어의 내장함수 중 하나이다.
Action이 Dispatch 될 때 마다 인자로 받는 함수를 호출한다.
onChange함수와 사용한다면 State값이 변할 때를 감지할 수 있겠죠? ㅋㅋ
정리해보자면,
Action : 잼민이
응애 엄마 나 이거 해줘!!!!
Reducer : 엄마
오케이 뭘 어떻게 해줄까.
Store : 엄마 뇌
어케해야하지
Dispatch : 잼민이 발작버튼
로블록스 게임결제
Subscribe : 아빠
헉 여보 잼민이 또 발작한다.
약간 이런느낌인듯 하다.
Redux 사용 이유
그럼 왜 이녀석을 사용하냐?
바로 데이터는 한방향으로만 흘러야 하기 때문입니다.
만약 프로젝트 내의 사용하는 상태가 적다면 로컬에서만 관리해도 충분하다.
하지만 프로젝트 규모가 크고 컴포넌트간 상태값 공유가 많다면 작성할 코드가 굉장히 많아지겠죠?
그래서 이 이쁜 녀석을 사용하면 편해지고 최적화도 된다 이겁니다.
클라이언트 데이터 관리에 굉장히 우세하다.
하지만 서버 데이터 관리에는 부적합하다고 한다. 서버 데이터 로직이 커지기 때문이라는데,
그것은 다음 챕터 react-query에서 알아보도록 하자.
그럼 나가세요.
