[Redux] 리덕스(Redux)에서 state 보관하는 법

이전글에서 Redux는 props 없이도 state를 공유할 수 있게 해준다고 했다.

왜냐면 state 들을 자바스크립트 파일 하나에(store) 다 보관해서

어떤 컴포넌트든 꺼내쓸 수 있도록 해주기 때문이다.

이번 글에서는 Redux 보관함인 store에 state를 보관하고 꺼내는지 알아보자.

 

 

Redux / state 만드는 법

 

이전 글에서 만들어둔 store.js 파일에 다음과 같이 state 하나 만드는 코드를 작성해 보았다. 

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

let user = createSlice({
  name : 'user',
  initialState : 'Park'
})

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

 

 

먼저 createSlice()로 state를 만든다.

name은 state명을, initialState는 state 값을 의미한다.

{ name : 'state이름', initialState : 'state값' } 이런식으로 적어주면 state가 하나 완성된다.

 

그리고 configureStore()에 state 등록을 해준다.

{ 작명 : createSlice이름.reducer } 이런식으로 등록해주면 state 등록도 완료.

이렇게 등록된 state는 각 컴포넌트에서 마음대로 사용할 수 있다.

 

 

Redux / state 꺼내쓰는 법

 

우선 state를 쓸 js 파일에 useSelector를 import 해준다.

어떤 컴포넌트에서든 useSelector((state) => { return state } ) 쓰면 store에 보관된 state를 가져올 수 있게 된다.

(아무개파일.js)

import { useSelector } from "react-redux"

function ShowUSer(){
  let user = useSelector((state) => { return state } )
  console.log(user) // {user : 'park'}

...
}

 

Redux 쓸 때 주의점

개발과정이 복잡할 때는 Redux 바로바로 써주는 것이 편하겠지만

생각보다 문법도 어렵고 코드 짜는 것도 귀찮기 때문에

개발 규모가 작거나 컴포넌트가 몇 없을 때에는

그냥 props 쓰는 것이 더 간단하다.

 

출처 : 코딩애플 강의문 참고