[React] Redux

Redux 

: props 없이 state를 공유할 수 있게 도와주는 라이브러리

store에 데이터를 저장해두고 모든 컴포넌트가 꺼내 쓸 수 있게 함

Vue.js의 store랑 같은 친구인듯,,,ㅎ

 

 

 

 

 

Redux 설치

※ 설치 전 package.json 파일에서 'react', 'react-dom' 항목의 버전 확인 필요

=> 18.1.X 미만의 버전이라면 사용 불가능!!

 

 

// 18.1.X 미만의 버전인 경우

package.json 파일의 'react', 'react-dom' 항목을 다음과 같이 수정하고, 터미널에서 npm install 실행

 

프로젝트 터미널 열어서,

$ npm install @reduxjs/toolkit react-redux

 

 

 

 

 

 

Redux 셋팅

1. store.js 파일 생성

• src/store.js 파일 생성하기

• store.js 를 열어서 아래의 코드 추가

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

2. index.js에서 store 등록

// index.js

... 생략
// 1. store import
import store from './store.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 2. Provider로 감싸기
  <Provider store={store}>
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  </Provider>
 
);

... 생략

 

 

 

 

 

 

Redux에 state 보관하고 사용하기

1. state 생성

• createSlice()로 변수를 생성해주고
• reducer에 등록해주기

// store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'

// useState와 같은 역할
// 1. 데이터 만들기
let state명 = createSlice({
  name : 'state명',
  initialState : 초기값
})

export default configureStore({
  reducer: { 
    // 2. 등록하기
    state명 : state명.reducer
  }
})

예시)

2. 사용하기

• useSelector() 함수로 state를 불러와서 사용
• useSelector()의 state는 store에 있는 모든 데이터를 말함

// Cart.js

import { useSelector } from 'react-redux';

function Cart() {
  
  // store의 state 가져오는 함수
  let store = useSelector((state)=>{ return state })
  console.log(store)

  return (
    <div className="container">
     ...생략
    </div>
  )
}

export default Cart;

콘솔창

store에 저장된 값이 출력됨

 

 

 

 

 

 

Redux의 state 변경하기

1. store.js에 state 변경해주는 함수 만들기

2. export

• reducers 안에 함수 여러개 선언 가능
• user.actions 에는 reducers안에 정의된 함수들이 들어온다

3.import 하고 dispatch()로 감싸서 사용하기

import { useSelector, useDispatch } from 'react-redux';
import { changeName } from '../store';

function Cart() {
  let store = useSelector((state)=>{ return state })
  // dispatch 사용
  let dispatch = useDispatch()

  return (
    <div className="container">
      ...생략
      
        <button
          onClick={()=>{
          // dispatch로 묶어서 사용
            dispatch(changeName())
          }}
        >+
        </button>
       
       ...생략
    </div>
  )
}


export default Cart;

인자가 있을때

• 인자.payload 형식으로 받아서 사용

removeFromCart(state, action) {
      return state.filter((item)=>{
        if (item.id === action.payload) {
          return
        }
        return item
      })
    }

 

 

 

 

 

 

 

놀이터 짱귀엽다

이해하려는 노력 만큼 힘들 때가 있다. 욕심이 많아 그런가,, ㅎ 할 일을 하자!!