[React] React-Redux

React-Redux

앞서, Redux는 “자바스크립트 앱을 위한 예측 가능한 상태 컨테이너"라고 했습니다. 이 말은 곧 Redux는 React 전용이 아닌 모든 자바스크립트 앱에 활용할 수 있다는 의미입니다.

React 또한 자바스크립트이기에 Redux를 사용할 수 있습니다. React에서 Redux를 사용하게 되면 1.전역 상태 관리, 2. Props drilling 문제를 해결할 수 있게 됩니다.

Redux는 어떤 자바스크립트 앱이든 사용할 수 있도록 범용성을 갖추고 있습니다. 하지만 이를 반대로 생각해보면 React에 최적화되지 않았다는 것을 의미합니다. 이러한 이유로 인해 Redux를 React와 통합하기 위해서는 Redux의 store에 저장된 state를 React 컴포넌트에서 가져올 수 있게 해주고, redux state가 변경될 경우 react state와 마찬가지로 리렌더링 해주는 등의 복잡한 과정을 수행해줘야 합니다.

React-Redux는 이처럼 Redux와 React를 통합하기 위해 필요한 복잡한 과정을 수행해주는 라이브러리입니다. React-Redux는 React에 Redux를 통합하기 위한 여러 함수와 컴포넌트들을 제공해줍니다. 따라서, 통상 React에서 Redux를 사용하기 위해서는 Redux와 React-Redux를 함께 사용하는 것이 일반적입니다.

• Redux: 자바스크립트 앱을 위한 상태 컨테이너
• React-Redux: Redux를 React와 통합하기 위한 라이브러리

React-Redux에서 제공하는 기능

React-Redux에서 제공하는 대표적인 기능들은 아래와 같습니다.

1. Provider

   React 컴포넌트들에게 Redux Store에 접근할 수 있는 기능을 제공해주는 컴포넌트입니다. 내부적으로 Context API를 활용하고 있습니다.

   // 일부 코드 생략
   
   import { Provider } from 'react-redux';
   import store from './store/index';
   import App from './App';
   
   root.render(
     <Provider store={store}>
       <App />
     </Provider>
   );

2. useSelector

   컴포넌트에서 Redux Store의 값을 가져올 수 있는 hook입니다. Redux의 Selector를 React Hook으로 표현한 형태입니다.

   import { useSelector } from 'react-redux';
   
   const Counter = () => {
     const count = useSelector((state) => state.value);
   
     return <h1>{count}</h1>;
   };

3. useDispatch

   컴포넌트에서 action을 store에 보내기 위한 dispatch 함수를 가져올 수 있는 hook입니다.

   import { useSelector, useDispatch } from 'react-redux';
   
   const Count = () => {
     const count = useSelector((state) => state.counter);
     const dispatch = useDispatch();
   
    const increase = () => {
       dispatch({ type: 'counter/increment' });
     };
   
     return (
       <div>
         <h1>{count}</h1>
         <button onClick={increase}>increment</button>
       </div>
     );
   };
   
   export default Count;