[React] 코딩애플 blog-part3-3 (Redux 설치 및 셋팅/사용)

Redux 라이브러리?

모든 컴포넌트 , 파일 끼리 같은 값을 공유할수 있는 저장공간 생성 가능

Context API와 같지만 , 추가로 데이터 관리 기능을 제공한다.

Redux사용 이유

  -  props 전송 없이도 모든 컴포넌트들이 state를 사용할 수 있게 만들어준다.

 

 

데이터를 보관하기 위한 redux 설치/셋팅

yarn add redux react-redux

npm install redux react-redux

redux를 사용하기 위해선 두개의 라이브러리( redux, react-redux) 설치!

redux : 데이터를 엄격하게 관리하는 기능

react-redux : 리덕스를 리액트에서 쓸 수 있게 도와주는 기능을 제공

 

 

(index.js)

import {Provider} from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>

);

1. <Provider> import
2. 내가 state값 공유를 원하는 컴포넌트를 다 감싼다.

→ App>컴포넌트와 그 안에있는 모든 HTML, 컴포넌트들은 전부 state를 직접! props 전송없이! 사용가능

 

컴포넌트가 매우 깊숙히 있다면 state전달하려고 props 여러번 써야하지만, redux를 이렇게 셋팅해주시면 props를 사용할 필요 없이 바로 쓰면 된다. 이전의 Context 문법과 배무 비슷하다.

 

(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>
        <App/>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>

);

3. redux에서 state를 하나 만드시려면 createStore을 import 해온 다음에 createStore(콜백함수)를 사용한다.

콜백함수엔 뭘 작성하냐면.. 내가 원하는 state 초기값을 퉤 뱉어내면 된다.

 

state 만들기 끝!

 

(index.js)

import 많은곳;
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>

);

 

4. <Provider>에 만든 state를 props처럼 등록

 

 

redux에 저장한 state데이터를 꺼내쓰는 법 → creatdStore()함수 사용

(Cart.js)

import 많은곳;
import {connect} from 'react-redux';
function Cart(){
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

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

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

데이터바인딩을 하기 위해서는 store안에 데이터를 props의 형태로 등록해야한다.

 

1. 일단 원하는 컴포넌트.js 파일 밑에 function 하나 만들어준다. 이때 return 안에다가 {작명 : state} 이렇게 적으면 store안에 있는 모든 state 데이터가 props로 등록된다. 그리고 작명한 것을 출력하면 저장해뒀던 redux 내의 state가 출력이 된다.

→ 함수의 역할은 store 안에 있던 state를 props로 만들어준다)

1. export default를 **export default connect(state를props화)(Cart);**로 적어준다. 이는 react-redux 라이브러리 사용법인데, edux store에 있던 데이터들이 props로 엮인 채로 컴포넌트가 export된다.

 

(Cart.js)

import 많은곳;
import {connect} from 'react-redux';
function Cart(props){
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>{props.state[0].name}</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

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

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

그럼 이제 데이터바인딩을 props 처럼 자유롭게 사용할 수 있다.

<td>{ props.state[0].name }</td>

 

 

오늘 배운 redux 셋팅/사용법 총정리

<setting>

1. index.js에 <Provider>를 import
2. state 값공유를 원하는 컴포넌트를 감싸
3. createStore를 import 해오신 다음 사용법에 의해 state를 만들어 let store라는 변수에 저장합니다.
4. <Provider store={store}> 이렇게 store를 등록

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

 

<store안에 있던 state 사용>

원하는 컴포넌트 파일 가서

1. 하단에 function state를props화() 를 하나 만들어주고 state를 props로 등록
2. 그리고 또 하단에 export default connect(state를props화)(Cart);

 

이렇게 사용하시면 이제 아까 만들어둔 state가 props로 등록이 된 것

props.state이름 이렇게 저장된 state를 자유롭게 사용!