Redux 란? Props 와 비교

1. Props란

Component간에 데이터를 전달해주는 것으로 부모가 자식에게 일방향으로만 전달해 줄 수 있음.

전달받은 자식에서의 값을 바꾸려면 전달해준 부모에서 값을 바꿔줘야 바뀜.

 

2. Redux란

Redux 는 State를 관리해주는 툴입니다.

props 전송 없이도 모든 컴포넌트들이 state를 사용할 수 있습니다.

npm install redux
npm install react-redux

redux 모듈은 데이터를 엄격하게 관리해주고 react-redux 모듈은 리액트에서 redux를 사용할 수 있게 해주는 라이브러리입니다.

 

(Cart.js)

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

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>
  )
}

export default Cart;

장바구니 컴포넌트를 만들었습니다.

tr은 가로줄, td/th는 세로줄을 하나 생성해달라는 뜻입니다.

 

(App.js)

import Cart from './Cart.js';

function App(){
  return (
    <Router path="/cart">
      <Cart></Cart>
    </Router>
  )
}

이제 /cart로 접속하면 Cart 컴포넌트가 보일겁니다.

 

그 다음 redux를 이용한 개발환경을 세팅하려면 index.js를 열어 다음과 같이 작성합니다.

 

(index.js)

import {Provider} from 'react-redux';

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

);

  1. <Provider>라는 것을 import 해오신 다음에

  2. 내가 state값 공유를 원하는 컴포넌트를 다 감싸면 됩니다.

 

<App> 컴포넌트를 감싸겠습니다.

그럼 <App> 컴포넌트와 그 안에 있는 모든 HTML, 컴포넌트들은 전부 state를 직접, props 전송없이 사용할 수 있습니다.

 

  3. redux 에서 state를 하나 만들기 위해선 createStore() 함수를 써야합니다. 

 

(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>

);

 

import 한 다음에 createStore(콜백함수) 이렇게 사용하면 되고 콜백함수엔 내가 원하는 state 초기값을 뱉어내면 됩니다.

그럼 state만들기 끝입니다.

 

  4. 이제 <Provider>에 만든 state를 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>

);

{id : 0, name : '멋진신발', quan : 2} 이렇게 생긴 장바구니용 데이터를 redux store 안에 만들었습니다.

(그리고 redux 설치 후엔 state들을 store라는 명칭으로 부릅니다. 아까 변수명이 store이기도 하고요)

 

이제 저장한 데이터를 Cart.js 가서 써보겠습니다.

진짜 <table>내에 아까 그 장바구니용 데이터를 데이터바인딩하는 겁니다.

다음을 따라하시면 됩니다.

 

(Cart.js)

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){ // 여기 state는 store안에 state데이터를 가져오는 함수
  return {
    상품명 : state.name
  }
}

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

connect를 import 하고

Cart 컴포넌트 아래에 함수를 추가해주셔야합니다.

 

(Cart.js)

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

이렇게 데이터바인딩을 할 수 있습니다.

 

 

 

3. Context API란

이것 역시 컴포넌트가 많을 때 Props 대신 쓸 수 있습니다.

일단 context 부터 세팅해야합니다.

 

let stockContext = React.createContext();

function App(){
  let [stock, setStock] = useState([10,11,12]);

  return (
    
  )
}

 

일단 같은 state 값을 공유하고 싶으면 context부터 만들어야 합니다.

createContext() 라는 함수로 변수를 만들고 이 변수가 <컴포넌트>가 됩니다.

 

 

let stockContext = React.createContext();

function App(){
  let [stock, setStock] = useState([10,11,12]);

  return (
    <arrContext.Provider value={stock}>
      <카드레이아웃3개생성하는부분/>
    </arrContext.Provider>
    
  )
}

 

만든 컴포넌트로 state값 공유를 원하는 컴포넌트들을 <범위></범위>로 전부 감쌉니다.

그리고 value = {state이름} 이렇게 공유할 state를 집어넣으면 됩니다.

 

그러면 복잡한 props 전송없이 <범위></범위> 안에 있는 모든 HTML& 컴포넌트는 arr state를 이용가능합니다.

 

마지막으로 한 단계를 더 거쳐야합니다.

 

import React, {useState, useContext} from 'react';

function Card(){
  let stock = useContext(stockContext);

  return (
    <HTML많은곳/>
    <div>{stock[0]}</div>
  )
}

 

state를 사용하고 싶으면 useContext() 라는 훅을 이용해서 사용을 원하는 context를 불러오셔야합니다.

위에서 쓴건 'stockContext에 들어있는 state를 변수로 저장해 쓰겠습니다' 라는 문법입니다.

그럼 이제 let stock 라는 변수엔 아까 저장해놨던 재고라는 state 데이터가 그대로 들어있습니다.

여기까지가 props전송없이 state를 쓰는 방법입니다.

 

해당 내용은 코딩애플의 강의를 보고 정리하며 만들었습니다.