Redux

리덕스(Redux)는 상태관리를 도와주는 외부 라이브러리이다.

위 사진과 같은 방식으로 Store파일에 저장된 상태를 여러 컴포넌트에서 쉽게 가져다 쓸 수 있게 해주는 것이 Redux이다.

Redux에 상태 보관하기

import { configureStore } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : {name : 'park', age : 27},
})

let lotto = createSlice({
  name : 'lotto',
  initialState : [32, 1, 6, 3, 22, 21],
})

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

Store.js 파일을 만들고 해당파일에서 위와 같이 createSlice()를 통해 상태를 만들 수 있으며, configureStore()를 export해서 상태를 다른 컴포넌트에서 사용할 수 있게 한다.
redux에선 state 하나를 slice라고 부른다.

Store에서 상태 가져오기

import {useSelector} from "react-redux";

const myState = useSelector(state => state)

각 컴포넌트에선 useSelector()를 사요하여 store에 보관중인 state를 가져올 수 있다. myState 변수엔 다음과 같은 값이 들어간다.

myState.user = {
  name: "park",
  age: 27
}
myState.lotto = [32,1,6,3,22,21]

useSelector 좀 더 스마트하게 쓰기

import {useSelector} from "react-redux";

const user = useSelector(state => state.user);
const lotto = useSelector(state => state.lotto);

위와 같이 사용하면 아래와 같이 더 편하게 사용 가능하다.

user = {
  name: "park",
  age: 27
}
lotto = [32,1,6,3,22,21]

Redux를 무조건 써야할까?

꼭 그럴 필요는 없다.
redux는 store파일에 상태를 저장하고, 또 상태를 변경하기 위해선 또 세팅해줘야 할 것들이 많다. 때문에 관리하는 상태가 많아질수록 store관련 코드가 매우 길어지고 복잡해진다.
때문에 props를 통해 전달하는 것이 더 좋은 경우도 있다.