Redux (in React)

유주성·2023년 6월 23일
0
post-thumbnail

이번에 배운 Redux라는 라이브러리는 내용 자체는 쉽지만, 코드의 작성이 너무 복잡해서 나의 언어로 요약을 해놓는 것이 중요하다고 생각하였다. 우선 코드스테이츠에서 제시한대로 redux를 사용해 간단한 문제를 풀어보며 주요 개념을 정리하고, Redux toolkit이라는 것을 사용하면 좋다고 하여서 공식문서를 보며 정리해볼 계획을 가지고 있다.

Props Drilling

이런 react코드가 있다고 가정해보자, 만약 컴포넌트D와 컴포넌트G에서 state의 값이나 함수를 사용한다고 하면, 상태의 위치를 컴포넌트A에 두고 props를 이용해 컴포넌트 B를 통해 컴포넌트 D로 전달해서 사용하여야 하고, 컴포넌트C와 컴포넌트F를 통해 컴포넌트G로 보내어서 사용하여야 한다. 컴포넌트 B,C,F는 해당 state를 이용을 하지 않아도 단지 자손 컴포넌트가 해당 state를 이용한다는 이유로 해당 값을 전달 받고, 전달 해주어야 한다.

이것이 tree의 깊이가 낮을 때는 사용이 가능하지만 깊이가 50이 된다고 가정을 해보자, 그러면 가독성이 떨어지고, 코드의 유지보수에도 어려움이 있으며, 전달만 해주는 컴포넌트들도 전부 리렌더링이 일어나 서버에 불필요한 부담을 줄 수 있다.

이를 해결하기 위해 여러가지 라이브러리등이 나왔는데, (Redux, Context api, Mobx, Recoil 등) 그중 Redux를 집중적으로 파헤쳐볼 것이다.

Redux

Redux는 상태관리 라이브러리 중 하나로 store에 상태값과 변환 함수를 두고, 이 값을 사용할 컴포넌트에서 값을 변환하는 것을 호출하여 사용하는 것이라고 생각하면 된다(아주 간단하게 하면..)

실제로는 내부가 동작하는 방식은..(Action → Dispatch → Reducer → Store)
1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
2. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
3. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
4. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.

결국 알아야 하는것은 각각의 함수와 객체들이 어디에 위치하여야 하고, 어떤 방식으로 사용해야 하는지 아는 것이 중요한 것 같다.

store

store은 값을 저장하는 공간으로 react의 가장 상위 컴포넌트에 선언된다. 이를 이용할 때 Provider라는 컴포넌트를 react-redux로 부터 불러와 최상위 컴포넌트로 지정해주고, store를 이의 props로 전달해 줌으로써, store를 가장 상위 컴포넌트에 선언할 수 있다.

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(Reducer);
...
<Provider store = {store}>
  <App />
<Provider>

reducer

reducer은 dispatch를 통해 전달받은 action을 처리해 store에 저장된 state값을 변경해주는 역할을 하는 함수이다.

const Reducer = (state = 1, action) => {
  switch (action.type) {
    case 'INCREASE':
      return state +1;

    case 'DECREASE':
      return state - 1; 

    default:
      return state 변경값;
  }
};

action

action 객체는 reducer에게 전달할 action값 구성하는 객체이다. 사용하고자 하는 컴포넌트에서 구성하여 dispatch를 통해 reducer로 넘겨주어야 한다.

const increase = () => {
  return {
    type: 'INCREASE',
  };
};

const decrease = () => {
  return {
    type: 'DECREASE',
  };
};

useDispatch(), useSelector()

useDispatch는 action객체를 reducer로 넘겨주는 역할을 하고, useSelector은 컴포넌트가 store에 저장된 state값에 접근 하도록 도와준다.

import { useDispatch, useSelector } from 'react-redux';

const dispatch = useDispatch()
const state = useSelector((state) => state);

dispatch( increase() )

결론적으로 말하면, store와 reducer는 상위 컴포넌트에 위치해야 하고, 그 외에 action, useDispatch, useSelector은 하위 컴포넌트와 상위컴포넌트에 state을 연결하는 역할을 한다고 볼 수 있겠다.

공식문서

공식문서가 다 영어로 되어있어 처음 봤을 때는 뭔소린가 하고 접었는데, 확실히 코드스테이츠에서 한국말로 한번 이해하고 보니 어느정도 이해가 된듯하다. 나중에 한번 toolkit으로 문제를 해결해보고, 이를 블로깅해보면 좋겠다.
https://redux.js.org/
https://react-redux.js.org/

블로깅을 마치며..

정말 내가 봐도 블로깅 설명이 나만 이해되게 해놓은 것 같다...ㅠㅡㅜ

0개의 댓글