Published 2022. 6. 29. 18:58

Redux를 쓰는 이유

Context API → 사용하기 쉽지만 복잡해진다면 관리, 추가하기 어렵다

Redux → 상태 관리 라이브러리로써 가장 많은 기능을 지원하기 때문에 현업에서 자주 많이 사용됨

이전 상태관리 라이브러리에 대해 잠시 정리헀지만 다시 간단히 정리해보면

Redux : 변수들을 어느 곳에서나 접근하고 관리하기 쉽게 만들어 주기 위해 사용하는 변수를 모아두는 창고라고 연상할 수 있다.

Redux 용어

기본 세팅을 할때부터 자주 사용되는 용어와 문법을 정리하였습니다

store : 변수를 모아서 관리하는 곳, 변수 창고라고 생각할 수 있다.

store안에는 현재의 앱 상태(state)와 리듀서라고 하는 것이 들어있다

//store

import { configureStore } from '@reduxjs/toolkit'
import userReducer from '../features/userSlice'

export default configureStore({
  reducer: {
      user : userReducer
  },
})

createSlice : store안에 넣어서 관리할 변수 박스를 만든다.

import { createSlice } from '@reduxjs/toolkit'

export const userSlice = createSlice({
  name: 'user', //변수 박스 이름
  initialState: { //object로 저장된다
    user: null, //박스에 저장되는 변수명들 
  },
  reducers: {
    login : (state, action) => {
        state.user = action.payload; 
    },
    logout :  (state) => {
        state.user = null;
    }
  },
})

export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;

Reducer : 변화를 일으키는 함수

reducers: {
    login : (state, action) => {
        state.user = action.payload;
    },
    logout :  (state) => {
        state.user = null;
    }

리듀서는 두가지의 파라미터 state와 action을 받아옴

object로 넘어오는 action들을 payload로 받는다.

사실 Reducer를 단순히 변화를 일으키는 함수라고 생각하면 어렵다..

객체에 특징을 Reduce(줄이다) 표현한다 ⇒ 객체의 특징을 줄여서 표현한 것 = Reducer라고 설명하고 싶다

Action : 상태에 어떠한 변화가 필요할 때 액션이란 것을 발생 시키게 되는데 이것은 하나의 객체로 표현됨

액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.

근데 사실 좀 어려워서 action을 console.log로 찍어봤다

대충 이런 구조가 나온다 type은 store에 저장된 이름 / 호출한 reducer가 있다.

그리고 payload로 넘어오는 값을 받을 수 있고 그 값을 slice에서 사용할 수 있다

Reducer를 발생시키기 위해 사용한다?

reducer로 호출하여 넘어온 데이터와 타입을 받는다고 생각했다

디스패치 (dispatch) : 스토어의 내장함수 중 하나로 액션을 발생 시키는 것

dispatch에는 액션을 파라미터로 전달함

slice안에 있는 함수를 사용할 수 있게 해준다

상태 변화를 일으킬 수 있는 useState의 set이라고 이해했다

dispatch(action)이라곤 하지만 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 처리하여 새로운 상태(state)로 업데이트 해준다.

구독 (subscribe) : 함수 형태의 값을 파라미터로 받는데 subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다

여기서 useSelector()란 리덕스 스토어의 상태를 조회하는 기능을 가지고 있는 React-Hook 중 하나이다. ( 위 설명한 구독의 기능을 수행하게 된다 )

//userSlice 위 코드 일부분
export const selectUser = (state) => state.user.user; //state(현재의 상태(state)에서 user라는 박스 이름을 가진 곳에서 user라는 변수를 찾아온다.)


import { useDispatch, useSelector } from "react-redux"; //실행시키고 싶은 함수명을 부르면 실행시켜줌

const user = useSelector(selectUser);
//userSilce에서 export된 값을 매개변수로 useSelector를 통해 조회함

간단한 세팅

마지막으로 provider로 감싸야만 Redux를 사용할 수 있게 된다

//index.js

import store from './app/store'
import {Provider} from 'react-redux'

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}> // provider 
            <App/>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

index.js에 store를 import시키면 된다. useSelector로 데이터를 받아 올 경우 데이터의 변경이 일어난다면 바로 리렌더링 해준다

간단한 후기

이렇게 하면 기본적인 Redux를 사용할 수 있다고 생각이 되지만 redux-saga 혹은 redux-thunk 아직 많이 부족하다고 생각이 든다. 이후에 추가적으로 따로 정리해보는 것이 좋을 것이고 계속 공부해야될 것 같다사실 Redux는 구글링하면 많이 나오기도 하고 써보면서 이해하는게 좋지 않을까 생각됩니다. 하지만 recoil등 상태관리 하는 것들이 많이 있기 때문에 잘 알아둬야 나중에 다른거 공부할 때 편하지 않을까 생각하고 있습니다

'TIL > 개념정리' 카테고리의 다른 글

React-query란? (0)	2022.07.01
Recoil (0)	2022.06.30
상태관리 라이브러리 (0)	2022.06.28
로그인 구현 방식 (0)	2022.06.25
Typescript (0)	2022.06.23

Redux