리액트-Redux 사용하기.1

dongwon·2021년 5월 15일
1

redux를 공부한대로 쉽게 접근하려고 해요.
일단 redux(리덕스)는 react나 vue.js에서 많이 사용되는 상태관리 라이브러리입니다.
(바닐라.js에서도 사용가능합니다.)
리액트 공부중이라서 리액트 위주로 사용해보려고 합니다.

Redux란?

redux를 사용하는 이유는 리액트의 모든 컴포넌트들의 state를 쉽게 공유하고 state의 데이터를 수정하고 싶을때 사용합니다.

기본적으로 리액트에서 컴포넌트 간 state를 전달하고 싶을 땐 props를 사용하여 부모에서 자식으로 1Level 하향식으로 값을 전달합니다. 트리 Level이 깊어지면(부모-자식-손자-4대-5대...등) 부모컴포넌트에서 5대까지 state를 전달하려면 props를 네번이나 사용해야지만 redux를 사용하면 Level상관없이 state 값을 바로 전달 할 수 있습니다.

또한 reducer를 사용하여 state의 변하는 데이터를 관리 할 수도 있습니다.

Context API라는 것도 있지만 Redux의 강력한 기능들 때문에. Context API는 다음에 다뤄보도록 하겠습니다.

1.Redux설치

터미널에서

npm install redux react-redux 

또는

yarn add redux react-redux

둘중에 하나 설치해 줍니다. (링크 npm vs yarn)
redux는 데이터를 엄격하게 관리하는 기능
react-redux는 리액트에서 리덕스를 사용할 수 있도록 하기위함.

2.리액트에서 Redux 세팅

1.리액트 프로젝트폴더에서 index.js 파일을 선택합니다.

index.js에 들어가보면

(index.js)
import React from 'react';
import 블라블라
	.
	.
	.
    
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
);

이렇게 되어있는 부분에 Provider를 import 합니다.

import React from 'react';
import 블라블라
	.
	.
	.
import {Provider} from 'react-redux'; //여기

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider>   //여기
        <App/>
      </Provider>  //여기
    </BrowserRouter>
  </React.StrictMode>
);

리액트에서 모든 컴포넌트에서 state의 데이터를 공유하기 위해 최상위 컴포넌트인 <App> (App.js부분)을 <Provider>로 감쌌습니다.

2.redux로 데이터를 공유하려는 state를 만드려면 creatStore() 함수를 사용

(index.js)
import React from 'react';
import 블라블라
	.
	.
	.
import {Provider} from 'react-redux'; 
import {createStore} from 'redux';   //여기
import Data from './data.js';   //여기 data.js를 import함
  
let store = createStore(()=>{  //여기
  return Data //state초기값
});  
 
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider>   
        <App/>
      </Provider>  
    </BrowserRouter>
  </React.StrictMode>
);

createStore(callback)
callback함수 부분에 공유 할 state 초기값을 리턴하고 store라는 변수에 담았습니다.

createStore(()=>{return state초기값}) 

*createStore() 함수를 통해 store를 생성했다면 이제 공유 할 state들은 어느 컴포넌트에 종속 되지 않고, store라는 외부 저장소에 저장이 되는 겁니다.

state초기값은 프로젝트폴더 안에서 data.js라는 js파일을 만들고 배열 안에 오브젝트형식으로 만들어두었습니다.

(data.js)
export default [  
  {
    id : 0,
    title : "BitCoin",
    price : "70,000,000",
    count : 10
  },

  {
    id : 1,
    title : "ethereum",
    price : 110000,
    count : 200
  },

  {
    id : 2,
    title : "DogeCoin",
    price : 130000,
    count : 3200
  }
]

3.<Provider>에 만든 store를 props사용법처럼 작성

(index.js)
import React from 'react';
import 블라블라
	.
	.
	.
import {Provider} from 'react-redux'; 
import {createStore} from 'redux';   
import Data from './data.js';   
  
let store = createStore(()=>{  
  return Data 
});  
 
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>   //여기
        <App/>
      </Provider store={store}>  //여기
    </BrowserRouter>
  </React.StrictMode>
);

4.store에서 state 꺼내기

1.데이터바인딩 하고 싶은 js파일 안에 react-redux의 connect를 import합니다.
2.js파일 최하단에 "export default connect(함수1)(함수2);"작성합니다.
3.함수1,함수2를 작성합니다.
함수1은 store안에 있던 state를 인자로 가져와 {state : state}의 오브젝트형식의 props를 만들어 반환합니다.
함수2는 데이터바인딩이 되는 함수로 props와 동일한 방법으로 데이터를 가져올 수 있습니다.

import React from 'react';
import {connect} from 'react-redux'; //여기

function 함수1(state){     //여기
  return {state : state}
}  
  
function 함수2(props){     //여기
  return (
    <div>
      <table>
        <tr>
          <td>1</td>
          <td>props.state[0].id</td>
          <td>props.state[0].title</td>
          <td>props.state[0].price</td>
          <td>props.state[0].count</td>
        </tr>
      </table>
    </div>
  )
}

export default connect(함수1)(함수2);  //여기

map을 사용하여 data.js의 오브젝트 배열들을 반복

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

function StoreToProps(state){  
  return {state : state};    
}
  
function CoinTable(props){
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>#id</th>
            <th>상품명</th>
            <th>가격</th>
            <th>수량</th>
          </tr>
        </thead>
        <tbody>
          {
            props.state.map((a,i)=>{
              return(
                <tr key={i}>
                  <td>{a.id}</td>
                  <td>{a.title}</td>
                  <td>{a.price}</td>
                  <th>{a.count}</th>
                </tr>
              )
            })
          }
        </tbody>
      </table>
    </div>
  )
}
export default connect(StoreToProps)(CoinTable);


reducer는 다음에.

profile
What?

0개의 댓글