[shop-project] Redux

kirin.logยท2021๋…„ 4์›” 30์ผ
0

๐ŸŒˆ Redux

  • ๊ฐ€์žฅ ์‚ฌ์šฉ๋ฅ ์ด ๋†’์€ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.
  • Context API์™€ ๋™์ผํ•˜๊ฒŒ state๊ฐ’์„ ๊ณต์œ ํ•˜๋Š” ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ์ƒํƒœ ๊ด€๋ จ ๋กœ์ง๋“ค์„ ๋‹ค๋ฅธ ํŒŒ์ผ๋“ค๋กœ ๋ถ„๋ฆฌ์‹œ์ผœ์„œ ๋”์šฑ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌ ํ•  ์ˆ˜ ์žˆ๊ณ , ์ปดํฌ๋„ŒํŠธ๋ผ๋ฆฌ ์ƒํƒœ๋ฅผ ๊ณต์œ ํ•˜๊ฒŒ ๋  ๋•Œ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ props๋ฅผ ํ†ตํ•ด ๊ฑฐ์น˜์ง€ ์•Š๊ณ ๋„ ์†์‰ฝ๊ฒŒ ์ƒํƒœ state๊ฐ’์„ ๊ณต์œ ํ•˜์—ฌ ์“ธ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“Œ redux๋ฅผ ์“ฐ๋Š” ์ด์œ 

1) props ์—†์ด ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๊ฐ€ state๋ฅผ ์ง์ ‘ ๊บผ๋‚ด ์“ธ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ
2) state ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ๊ฐ€ ์šฉ์ดํ•˜๊ธฐ ๋•Œ๋ฌธ (state๋ฐ์ดํ„ฐ์˜ ์ˆ˜์ •๋ฐฉ๋ฒ•์„ ๋ฏธ๋ฆฌ ์ •์˜ํ•œ๋‹ค)

๐Ÿฃ Redux ๋ฅผ ์‚ฌ์šฉํ•œ ์ƒํƒœ ์ „๋‹ฌ(๊ณต์œ ) ๊ตฌ์กฐ

  • store : ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด๊ณ  ์žˆ์œผ๋ฉฐ, ์ปดํฌ๋„ŒํŠธ๋ผ๋ฆฌ ์ง์ ‘ ๊ต๋ฅ˜ํ•˜์ง€ ์•Š๊ณ  store ์ค‘๊ฐ„์ž๋ฅผ ํ†ตํ•ด ๊ฐ’์„ ๊ณต์œ ํ•œ๋‹ค.
  • dispatch : store์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๊ธฐ๋Šฅ
  • subscribe : state์ƒํƒœ์— ๋ณ€๋™์ด ์žˆ์œผ๋ฉด ์ปดํฌ๋„ŒํŠธ์— ๋ฐ˜์˜ํ•˜๋Š” ๊ธฐ๋Šฅ

๐ŸŽ redux ์„ค์น˜ ๋ฐ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

1) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜
npm install redux react-redux ํ„ฐ๋ฏธ๋„์— ์„ค์น˜

2) index.js ํŒŒ์ผ์— ์…‹ํŒ…

2-1. importํ•ด์ฃผ๊ธฐ
import { Provider } from 'react-redux';
import { createStore } from 'redux';

2-2) <App /> ์ปดํฌ๋„ŒํŠธ๋ฅผ <Provider> ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ์‹ธ๊ธฐ
<Provider>
<App />
</Provider>

2-3) ๋ณ€์ˆ˜ ์ƒ์„ฑํ•ด์„œ createStore() ๋‹ด๊ธฐ
const store = createStore( () => { return "state์ €์žฅ" } );
โ— createStore() ์•ˆ์—๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋กœ state๋ฅผ ์ €์žฅํ•œ๋‹ค

2-4) <Provider> ์— store ๋ณ€์ˆ˜๋ฅผ ๋‹ด๋Š”๋‹ค(state ์ดˆ๊ธฐ๊ฐ’์ด ๋‹ด๊ฒจ์žˆ๋‹ค)
<Provider store={store}>
โ— <Provider>์— props๋กœ ์ „์†กํ•˜๋Š” ๊ฒƒ

3) state๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์— ๊ฐ€์„œ props๋กœ ๋ฐ›๊ธฐ

3-1) Cart.js(state๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ)์˜ ํ•จ์ˆ˜ ๋ฐ–์— ์„ค์ •(export ๋ฐ”๋กœ ์œ„)
function ํ•จ์ˆ˜๋ช…์ž‘๋ช…(state) {
return { state: state }
};
export default connect(ํ•จ์ˆ˜๋ช…์ž‘๋ช…) (Cart)
โ— function๋งŒ๋“  ๋’ค, export default connect ( ํ•จ์ˆ˜๋ช…์ž‘๋ช… ) ( ์ปดํฌ๋„ŒํŠธ๋ช… ) ํ•ด์ฃผ๊ธฐ


๐Ÿป redux ์ ์šฉ ์˜ˆ์‹œ

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// redux
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { combineReducers, createStore } from 'redux';

                           // ์ฝœ๋ฐฑํ•จ์ˆ˜ ์•ˆ์— state์ดˆ๊ธฐ๊ฐ’์„ ๋‹ด์•„์ค€๋‹ค(์—ฌ๋Ÿฌ๊ฐœ๋ฉด ๋ฐฐ์—ดํ˜•์‹)
const store = createStore( () => { 
	return [     // state์ดˆ๊ธฐ๊ฐ’์„ ๊ฐ์ฒด๋กœ ์—ฌ๋Ÿฌ๊ฐœ(๋ฐฐ์—ด)๋‹ด์Œ.
    	    {id: 0, name: ๋ฉ‹์ง„์‹ ๋ฐœ, quan: 2},
            {id: 1, name: ์˜ˆ์œ์‹ ๋ฐœ, quan: 3},
            {id: 3, name: ๊ท€์—ฌ์šด์‹ ๋ฐœ, quan: 1}
            ] 
    });

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>  // state์ดˆ๊ธฐ๊ฐ’์„ ๋‹ด์€ store๋ณ€์ˆ˜๋ฅผ provider์— ๋‹ด๋Š”๋‹ค
      <App />
    </Provider>
  </BrowserRouter>, document.getElementById('root')
);





// Cart.js
import React from 'react';
import { connect } from 'react-redux';  // import ํ•ด์ฃผ๊ธฐ

const Cart = (props) => {
  return (
    <div className="Cart">
       // ์ฝ”๋“œ ์ƒ๋žต
       {
         // state๋ฅผ props๋กœ ๋ฐ›์•„์™”์œผ๋ฏ€๋กœ props.state๋กœ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜จ๋‹ค
         props.state.map( (a, i) => {
          return (
           <tr key={i}>
            <td>{i+1}</td>
            <td> { props.state[i].name } </td>
            <td> { props.state[i].quan } </td>
                 // ์•„๋ž˜์—์„œ "state๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๋“ฑ๋ก"ํ•œ props๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ ์šฉํ•œ ๊ฒƒ.
           </tr>
          )
         })
       }
    </div>
  );
};

โ— redux store ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์™€์„œ props๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜ !!!!!
// state๊ฐ’์„ props๋กœ ๋ฐ›์•„์˜ค๋Š” ์„ค์ •์„ ํ•ด์ค€๋‹ค (function๋งŒ๋“  ๋’ค, export ์กฐ์ •)
function cartInfo(state) {
    return {
        // state๋ฐ์ดํ„ฐ๋ฅผ state๋ผ๋Š” ์ด๋ฆ„์˜ props๋กœ ๋“ฑ๋กํ•˜๋Š” ๊ฒƒ.
        state: state
    }
};

export default connect(cartInfo) (Cart)
profile
boma91@gmail.com

0๊ฐœ์˜ ๋Œ“๊ธ€