redux ? tookit? 어떻게 사용하고 이게 뭐야? useSelector는?

react를 사용하다보면 redux라는걸 많이 들어봤는데 간단정리를 해놓자!

 

 

redux란 useState의 기능과 비슷한 거라고 생각하면된다. (잠시저장의 너낌쓰)

props를 하면 부모 -> 자식관계로 만 전달이 가능한데 

이게 대규모 프로젝트가 된다면 하나하나 props를 해주기 번거로우니

따로 폴더안에 저장을 해서 필요할때마다 꺼내쓰면 된다.

 

그럼 props를 왜 사용하냐?

둘의 차이는

소규모 프로젝트는 그냥 props를 사용하면 편리하다

큰 프로젝트시

redux를 사용하자 

왜?

 

redux를 사용하는 문법이..ㅎㅎ 상당히 길어서 그렇다.

 

우선 redux 설치법과 사용법은 아래에 적어두자.

 

터미널에 아래 코드 작성 

[ 오류가 가끔뜨는 경우는 react의 버전이 맞지 않기때문 대부분 버전문제이니 확인 필수 18.1 이상의 버전 확인 ]

npm install @reduxjs/toolkit react-redux

 

설치후 store.js 폴더 만들기 ( 저장소)

만든 후 아래 코드 작성해주기.

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

 

설치후 index.js 가서 provider import 시켜주고 폴더를 안에 넣어준다.

<Provider store={store}>
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
</Provider>

 

 

이렇게 해주면 store.js 안에 있는 내용들은 

App 하위 폴더 전부에 사용할수 있게 된다.

 

 

 

그리고  redux의 사용법은 아래 문법과 같다.

import { configureStore, createSlice } from "@reduxjs/toolkit";

//useState와 같은 역할
let user = createSlice({
  name: "user",
  initialState: "kim",
});
let stock = createSlice({
  name: "stock",
  initialState: [10, 11, 12],
});

// 위의 state를 등록하는 곳
export default configureStore({
  reducer: {
    user: user.reducer,
    stock: stock.reducer,
  },
});

// 이제 모든 state가 여기의 내용을 사용할 수 있음.

 

위에서 보는것과 같이 

let 으로 선언해주고 createSlice를 사용해서 안에 데이터를 넣어준다.

name -> 키

initialState -> 값 

과 같다고 보면된다.

 

그리고 아래에 있는 export는 위의 state를 밖으로 보낼수 있게 등록하는 것이다.

 

 

이렇게 store.js 의 작성을 마쳤다면 이제 안에 있는 내용을 출력할 cart.js 페이지

import React from "react";
import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";

function Cart() {
  //   redux의 state를 가져와주는 훅
  let a = useSelector((state) => {
    return state.user;
  });
  console.log(a.stock);

  return (
    <Table>
      <thead>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경하기</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>안녕</td>
          <td>안녕</td>
          <td>안녕</td>
        </tr>
      </tbody>
    </Table>
  );
}

export default Cart;

 

 

위의 코드에서 보듯이 useSelector를 사용해서 꺼내오면된다.

useSelector의 사용법은 아래 문법으로 사용한다.

  let a = useSelector((state) => {return state.꺼내올 키이름});

 

useSelector는 리액트 훅으로 redux의 데이터를 꺼내올때 사용되는것이라고 이해하면 편하다.

 

이런식으로 데이터를 꺼내와서 바인딩을 해주면 끄-----------읏!