[React] Redux 기초 문법(1) - 설치 및 세팅

 Redux란?

Redux라는 라이브러리는 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능케 해주고 state 데이터를 관리하는 기능을 가지고 있다. Redux를 쓰는 여러가지 이유 중 하나는 props 전송없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하기 때문에 컴포넌트가 매우 깊숙히 있다면 state를 전달하기 위해 props를 수십번 써야하고 귀찮은데 redux를 세팅하면 Context API와 같이 props를 수십번 쓸 필요없이 바로 꺼내쓸 수 있게 해준다.

 

 설치방법

터미널에 yarn add redux react-redux 를 쳐서 2개의 라이브러리를 설치한다.

(또는 npm install redux react-redux)

 

 세팅하기

index.js에 <Provider>를 import하고 state 값공유를 원하는 컴포넌트를 감싼다.

그리고 createStore를 import 한 다음 사용법에 의해 state를 만들어 let store라는 변수에 저장한다.

<Provider store={store}> 이렇게 store를 등록하면 셋팅이 끝난다.

이제 Provider로 감싼 컴포넌트는 전부 store안에 있던 값을 props없이 공유 가능하다.

 

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')
);

 

 

 state 데이터 꺼내쓰기

store에 있는 state 데이터사용을 원하는 컴포넌트.js 파일(나는 Cart.js를 사용했다) 밑에 function을 만든다.

(store 안에 있던 state를 props로 만들어주는 역할 {자유작명 : state} )

 

그리고 export default하던 부분에 connect(함수명)(컴포넌트명)을 넣는다.

connect 함수는 위에서 react-redux를 import를 해온다.

그럼 redux store에 있던 데이터들이 props로 엮인 채로 컴포넌트가 export 된다.

 

Cart.js

import React from 'react';
import {Table} from 'react-bootstrap';
import {connect} from 'react-redux';

function Cart(props){
 return(
  <div>
  <Table responsive>
   <thead>
    <tr>
     <th>#</th>
     <th>상품명</th>
     <th>수량</th>
     <th>변경</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>{ props.state[0].name }</td>
     <td>{ props.state[0].quan }</td>
     <td>Table cell</td>
    </tr>
   </tbody>
  </Table>
  </div>
 )
}

function state를props화(state){
 return {
  state : state
 }
}

export default connect(state를props화)(Cart)

 

 결과

 

redux를 이용해 데이터바인딩 성공!