[리액트]리덕스(Redux) 는 무엇일까? | 리덕스를 왜 사용할까?

🤔 리덕스란?

애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구이다.
복잡한 상태 관리가 이루어지는 SPA(Single Page Application)에서 유용하게 사용된다.
리덕스는 리액트 뿐만 아니라 jQuery, Angular 등을 사용하는 애플리케이션에서도 사용할 수 있다.
나는 리액트에서 사용하는 리덕스에 대해 알아볼 것이다 !

리액트의 데이터 흐름은 단방향이기 때문에, 부모 컴포넌트 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 된다.
부모 컴포넌트의 상태값이 변하게 되면, 자식 컴포넌트는 변화된 상태에 맞게 data나 ui를 변경한다. 즉, 리랜더링을 한다.

여기서! 컴포넌트는 다음과 같은 상황에서 리랜더링 된다.

1. 자신의 상태(state)값이 변경될 때
2. 부모 컴포넌트가 리랜더링될 때
3. 자신이 전달받은 props값이 변경될 때
4. 강제 업데이트 함수가 실행될 때

즉, 위와 같은 상황에서 부모 컴포넌트의 상태값이 변한다면, 부모 컴포넌트는 리랜더링 될 것이고, 자식 컴포넌트 또한 리랜더링 된다.

---

🔍 Redux를 쓰는 이유

1. 모든 컴포넌트들이 props문법 없이 state를 직접 꺼내쓸 수 있음 -> 부모 자식 간의 데이터 전달의 편리성을 위해
2. 상태(state) 관리의 용이 -> store안에 state수정 방법을 미리 정의해둔다. 컴포넌트들은 직접 state를 직접 수정하지 않고 수정 요청만 보내서 그냥 가져와쓰면 된다.

💡 장점

버그가 일어났을 때 추적이 쉬움. 버그가 생기면 범인은 무조건 store.js임.

 

여기서, 자식은 부모의 상태를 막 변경할 수 없다. props문법을 통해 전달받은 상태만을 변경할 수 있다.
따라서, 컴포넌트가 100개 중첩해서 있다면 state를 전달해주기 위해 엄청나게 많은 props문법을 사용해야한다.
리덕스를 설치하면 이 안에 상태들을 다 저장해두어 컴포넌트가 필요할 때 꺼내쓸 수 있다.

설치

npm install redux

세팅 (이해할 필요 X, 방법일 뿐)

: 몸무게 증가를 예로 들어 설명하겠다

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

function reducer(state = 100, action){
  return state;
}

let store = createStore(reducer);

ReactDOM.render(
  <React.StricMode>
    <Provider store={store}>
      <App/>
    </Provider>
  </React.StricMode>
  document.getElementById('root')
);

 

🔨 컴포넌트에서 store에 있던 state를 쓰는 방법

: useSelector로 리덕스의 state를 조회한다.

function App(){
  const 꺼내온거 = useSelect((state) => state);
}

 

index.js
: store에 state 수정방법을 미리 정의한다.

function reducer(state = 체중, action){
  switch (action.type) {
    case '증가':
      return state + 1
    case '감소':
      return state - 1
    default:
      return state
  }
}

 

컴포넌트에서 state 수정 요청하는 법

: dispatch 사용

const dispatch = useDispatch();
...
return (
  <button onClick={()=>{ dispatch({type: '증가'}) }}>더하기</button>
)

클릭마다 1씩 증가하게 된다.

 

Vuex랑 같은 개념으로 생각하면 된다 !

 

공식문서

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux