Coding Apple, React 강좌 내용 정리.17 - Redux.1

Redux

컴포넌트간에 줄줄이 엮어서 사용하는 props 대신에 redux라는걸 사용할 수 있다.

연결된 컴포넌트들이 state의 공유가 가능하다.

 

   Redux 사용하기 위한 순서   

1. 설치

터미널에서 npm install redux react-redux

 

2 . 사용 준비 in code

import {Provider} from 'react-redux'  // Provider 생성

import { createStore } from 'redux' // redux 생성

 

필요한 부분을 감싸기

- <Provider> 로 state를 공유할 대상을 ( <App> ) 감싼다

- 공유할 state를 createStore 함수로 생성한다.

    <테스트 데이터>

    let store = createStore( state를 가져오고 리턴하는 함수() );

- createStore로 생성한 객체를 <Provider>에 전달한다

 

( index.js )

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

let store = createStore( ()=> {return [{id:0, name:'신발',quan:2}]} )

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

ex) Cart.js 를 만들어서, 해당 상품정보를 전달하는 내용

 

( App.js )

import Cart from './Cart'; // Cart.js import 시킨다.

...

 

<Route path="/Cart">
  <Cart />
</Route>

 

만들어둔 store 데이터 사용하기

(Cart.js 에서)

1. function 만들기

2. export  default connect()

import { connect } from "react-redux"; 도 포함

3. index.js에 만들어둔 store 데이터를 props로 등록하고 쓴다.

(Cart.js)

function Cart(props) {
   // props 사용
   ...
   <tbody>
   	...
        <tr>
            <td>1</td>
            <td>{props.state[0].name }</td>
            <td>asdf</td>
            <td>asdf</td>
        </tr>        
    </tbody>
}

function fnc(state) {
    return {
        state: state
    }
}
export default connect(fnc)(Cart)
// export default Cart;

깊은 하위컴포넌트들도 props 여러번 전송없이 state를 직접 갖다쓸수있다