Redux
๋ React
์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
๋ฆฌ์กํธ๋ ๋จ๋ฐฉํฅ ํต์ ์ด๋ผ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์์ ์ปดํฌ๋ํธ์๊ฒ props๋ฅผ ์ ๋ฌํด ์ฃผ๋ ๋ฐฉ์์ด๋ค.
์์๋ผ๋ฆฌ ์ฃผ๊ณ ๋ฐ์ ๋๋ ๋ถ๋ชจ๋ฅผ ๊ฑฐ์ณ ์ ๋ฌ ํด์ผํ๋ค. ๊ทธ๋ ๋ค๋ฉด props๋ฅผ ์์ฒญ ๋ง์ด ์จ์ผํ๋ค๋ ๊ฒ์ด๋ค.
ํ์ง๋ง redux
๋ฅผ ์ด๋ค๋ฉด ์ํ์ ์ฅ์ ์ ์ฅ์ผ๋ก ํ ๋นํ๋ค. ์๋์ ๊ทธ๋ฆผ๊ณผ ๊ฐ๋ค.
ํ์ง๋ง ์ปดํฌ๋ํธ๊ฐ ์คํ ์ด๋ก ์ง์ ์ ์ผ๋ก ๋ฐ๋ก ์์ฒญํ์ง ๋ชปํ๋ค. ๊ทธ๋์ ์ปดํฌ๋ํธ๊ฐ ์คํ ์ด๋ก ๊ฐ๊ธฐ๊น์ง์ 4๊ฐ์ง ์คํ
์ด ์๋ค.
์๋ฅผ ๋ค์ด ๋ก๊ทธ์ธ ์ปดํฌ๋ํธ์์ ๋ก๊ทธ์ธํ๊ธฐ Action
์ ๋์ง๋ค. ๊ทธ๋ผ Reducer
๊ฐ ์บ์นํด์ ๋ง์ ์์
์ง์๋ค์ด ์๋ ๊ฒ์ ์ธ์งํ๋ ์๊ฐ ์์
์ ์์ํ๋ค. ์คํ ์ด์์ ์ปดํฌ๋ํธ๋ฅผ ๋ฐ๊ฟ์ค๋ค.
์ฌ๊ธฐ์ Action
์ ๋์ ธ์ฃผ๋ ํจ์๋ useDispatch
๋ผ๋ ํจ์๊ณ , ๋ ์คํ ์ด
์ ์๋ ๊ฐ์ ๊ฐ์ ธ๋ค ์ธ ๋๋ useSelector
๋ผ๋ ํจ์๋ฅผ ์ด๋ค.
๋จผ์ ๋ฆฌ๋์ค ํ์ด์ง๋ฅผ ๋ค์ด๊ฐ์ Redux ์์ํ๊ธฐ
๊ฐ ๋ณด์ผ ๊ฒ์ด๋ค. ๊ฑฐ๊ธฐ์ Redux core
๋ฅผ ์ค์นํ๋ค.
# NPM
npm install redux
# Yarn
yarn add redux
์ค์น๊ฐ ์๋ฃ๋๋ฉด ํ๊ฐ์ง ๋ ์ค์น ํด์ผํ๋ค. ๊ทธ ๊ฒ์ ๋ฐ๋ก React Redux
๋ฅผ ์ค์นํด์ผ ํ๋ค.
๐คฆโโ๏ธ ์
Redux
๋ฅผ ์ค์น๋ฅผ ํ๋๋ฐ ๋React Redux
๋ฅผ ์ค์น ํด์ผ ํ๋๊ฐ?๊ทธ ์ด์ ๋ ๊ฐ๋จํ๋ค.
Redux
๋React
๋ง ์ฐ์ด๋ ๊ฒ์ด ์๋๊ธฐ ๋๋ฌธ์React Redux
๋ฅผ ์ค์นํ๋ ๊ฒ์ด๋ค.
๋ฆฌ์ํธ ๋ฆฌ๋์คํ์ด์ง๋ก ๊ฐ์ Get Started
๋ฅผ ๋๋ฌ ๋ค์ด๊ฐ๋ค.
An Existing React App
ํญ๋ชฉ์์ ์ค์น ๋ฐฉ๋ฒ์ด ์๋ค.
# If you use npm:
npm install react-redux
# Or if you use Yarn:
yarn add react-redux
์ค์น๋ฅผ ๋คํ๋ค๋ฉด ์ด์ ์ฝ๋๋ก ๊ฐ์ setup
์ ํด์ผํ๋ค.
๋จผ์ index.js
ํ์ผ๋ก ๊ฐ์ ์๋ ์ฝ๋ ์ฒ๋ผ ๋ณ๊ฒฝํด์ค๋ค.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
์ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ์๋์ ๊ฐ์ ์๋ฌ๊ฐ ๋ฌ๋ค.
์ด ์๋ฌ๋ <Provider store={store}>
๊ฐ ํ์ผ์ด ์กด์ฌ ํ์ง ์์์์ด๋ค. ๊ทธ๋ผ store
ํ์ผ์ ๋ง๋ค์ด ๋ณด์. src
์์ redux
ํด๋๋ฅผ ๋ง๋ค๊ณ ๊ทธ ์์ store.js
ํ์ผ์ ๋ง๋ ๋ค.
store.js
ํ์ผ์ ๋ง๋ค์๋ค๋ฉด ํ์ผ์์ ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๋ฅผ ์์ฑํ๋ค.
import { createStore } from 'redux';
import reducer from "./reducer/reducer";
let store = createStore(reducer);
export default store;
๊ทธ๋ฆฌ๊ณ redux
ํด๋์์ reducer
ํด๋๋ฅผ ๋ง๋ค๊ณ ๊ทธ ์์reducer.js
ํ์ผ์ ๋ง๋ค์ด ์ค๋ค.
๊ทธ ํ reducer.js
ํ์ผ์ ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๋ฅผ ์์ฑํด์ค๋ค.
const initialState = {
};
const contactReducer = (state = initialState, action) => {
};
export default contactReducer;
์ด๊ฑธ๋ก ๊ธฐ๋ณธ ์ธํ ์ ๋์ด๋ค.