[React] Redux : store에 state 보관, 사용하는 법

 

 

 

Redux store에 state 보관하는 법

(Store.js)

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

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})
let stock = createSlice({
    name : 'stock',
    initialState : [10, 11, 12]
})

export default configureStore({
  reducer: {
    user : user.reducer,
    stock : stock.reducer
  }
})

 

1. createSlice()를 상단에서 import 해온 다음 { name : 'state 이름', initialState : 'state 값' }으로 state를 하나 생성한다.

(createSlice()는 useState()와 용도가 비슷하다.)

 

2. state 등록은 configureStore() 안에 { 작명 : createSlice만든state.reducer }로 등록한다.

여기 등록한 state는 모든 컴포넌트에서 자유롭게 사용 가능하다.

 

Redux store에 있던 state 사용하는 법

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a);
  console.log(a.user);

  return (생략)
}

 

아무 컴포넌트에서 useSelector( (state) => { returen state } ) 쓰면 store에 있던 모든 state가 그 자리에 남는다.

변수에 저장해서 출력해 보면 확인할 수 있다.

 

(참고) useSelector 편하게 쓰려면

let a = useSelector( (state) => { return state } )

(state) = > { return state } }

 ▲ store 안에 있던 모든 state를 뜻한다.

 

let a = useSelector( (state) =>  state.user )

그래서 이런 식으로 원하는 state만 가져다 사용할 수 있다.

( 자바스크립트 문법에서 return과 중괄호는 생략 가능)

 

 

Redux를 이용하면 편하지만 간단한 프로젝트나 컴포넌트가 몇 개 없을 때에는 props를 쓰는 게 코드가 짧으니 상황에 맞게 편한 쪽으로 사용하면 된다.

 

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.