[React]리액트에서 Redux 써보기

리액트는 많은 컴포넌트를 쓰게 됩니다.

프로젝트가 커지면 커질수록 어떤 값은 다양한 곳에서 쓰일 때가 있는데 그럴 때 Redux(리덕스)를 쓰게 됩니다.

만약 작은 프로젝트라면 단순하게 props로 내려주는게 더 편할지도 모릅니다.

 

따라서 큰 프로젝트라면 Redux(리덕스)와 같은 라이브러리를 사용하는 것을 추천하고,

작은 프로젝트라면 props로 바로바로 내려줘서 사용하는 것을 추천드립니다.

 

 

 

Redux란?

props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리입니다.

Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있습니다.

그걸 모든 컴포넌트에서 사용할 수 있습니다.

(도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다!!!)

이 때문에 엄청 멀리있는 컴포넌트에도 귀찮은 props 전송을 할 필요가 없어집니다.

따라서 프로젝트가 클 수록 컴포넌트도 많아지니 이럴 때 쓰면 좋을 듯 합니다.

 

 

이러한 전역 상태관리 라이브러리는 Redux, MobX, Context API, Recoil 등 정말 많습니다.

 그 중 Redux가 사용자가 가장 많습니다.

 

 

Redux 설치

npm install @reduxjs/toolkit react-redux

그렇다면 대부분 쓰는 비주얼 스튜디오 코드에서 터미널을 열어서 위 코드를 입력하면 됩니다.

위의 redux toolkit이라는 라이브러리는 기존의 redux의 개선한 버전으로 문법이 좀 더 쉬워졌습니다.

기존의 Redux만 쓴다면 Redux-actions, Redux-thunk 등등 정말 많은 문법과 기능 등 설치해서 사용해야합니다.

이런 번거로운 것들을 쉽게 해주는게 Redux-toolkit이라고 생각하시면 됩니다.

 

이런 라이브러리를 설치할 때는 버전 문제가 정말 크기 때문에 "react" 와 "react-dom" 을 잘 보고 설치해야합니다.

package.json 파일에서 버전들을 꼭 확인하시고 쓰면 될 듯합니다.

package.json

 

 

Redux 셋팅

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
	reducer: {}
})

위 코드를 만들어서 Redux 전용 store.js 파일을 만듭니다. 이 파일은 아무데나 만들어도 됩니다.

저는 다음과 같이 현재 하고있는 프로젝트에 src/store/index.js 파일을 만들어서 적용하였습니다.

src/store/index.js

생성한 이 파일이 state들을 보관하는 파일입니다.

이제 리액트를 설치하면 나오는 index.js 파일로 가서 다음과 같이 코드를 추가합니다.

index.js

Provider 라는 컴포넌트와 아까 작성한 파일을 import 합니다.

그 다음 위 코드처럼 <Provider store={import한것}> 으로 <App /> 을 감싸주면 됩니다.

이렇게 함으로써 <App>과 그 자식 컴포넌트들은 store.js에 있던 state를 꺼내쓸 수 있습니다.

 

 

 

 

Redux 상태보관

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

let 변수 = createSlice({
    name: 이름변수,
    initialState: 이름변수 초기값,
})

export default configureStore({
	reducer: {
    	변수2: 변수.reducer
    },
});

위 처럼 쓰면 state(상태)를 보관할 수 있다.

createSlice를 통해서 state를 생성할 수 있고, configureStore() 안에 등록함으로써 모든 컴포넌트가 마음대로 쓸 수 있게된다.

보통 이름은 동일하게 지으므로 변수, 이름변수, 변수2는 동일하게 짓는다. (개인적인 생각)

 

store.js

현재 쓰는 프로젝트에서는 위와 같이 적용했다.

저 state를 어떤 컴포넌트에서 어떻게 꺼내는지 살펴보자.

 

 

import { useSelector } from "react-redux";

function 어떤컴포넌트() {
	let state = useSelector((state) => { return state })
    
    ...
    
    return 생략
}

어떤 컴포넌트가 있으면 저렇게 useSelector((state) => { return state }) 를 쓴다.

그러면 우리가 등록한 state들이 전부 저 let state에 오게 된다.

따라서 저기서 꺼내서 쓰거나 return 받을 때 그 변수만 써서 받아도 된다.

 

어떤 컴포넌트.js

위와 같은 형식으로 줄여서 사용해도 된다.

 

 

 

 

Redux 상태 수정

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

let 변수 = createSlice({
    name: 이름변수,
    initialState: 'hello',
    reducers : {
    	changeName(state) {
        	return '변경하기 ' + state
        }
    }
});

export let { changeName } = 변수.actions

export default configureStore({
	reducer: {
    	변수2: 변수.reducer
    },
});

상태를 수정하려면 먼저 store.js 에서 수정하는 함수를 만들어야 한다.

현재 Slice인 변수 안에 reducers : { } 를 만들어서 이 안에 수정함수를 만들면 된다.

여기서는 changeName()을 만들었는데 파라미터 안에 state 를 넣었다. 이 때 state는 기존에 가지고있던 데이터를 뜻한다.

따라서 changeName()을 실행한다면 return 값으로는 "변경하기 hello" 로 수정이 된다.

 

그리고 수정함수를 만들었으면 export 해주어야 한다.

따라서 위 코드처럼 export let { 수정함수이름 } = slice변수.actions; 를 추가하면 된다.

slice변수.actions를 쓰면 그 state 수정함수가 전부 출력이 되는데 그 중에서 changeName 을 export 하겠다는 의미이다.

store.js

저는 user 변수에다가 객체(object)를 저장해놨었는데 이 객체를 변경하는 함수 changeUser를 만들었습니다.

파라미터 첫번째 state는 원본 데이터이고,

파라미터 두번째 aciton은 저희가 동적으로 입력한 값을 받을 수 있습니다.

따라서 저는 changeUser(새로운 유저객체) 를 쓴다면 저렇게 변경을 할 수 있습니다.

새로운 유저객체를 꺼내쓸려면 action.payload 에서 꺼내야 합니다.

파라미터로 넣은 값들은 action.payload에 들어있기 때문입니다.

이 action.type 하면 state 수정 함수 이름이 나옵니다.

 

자 그럼 저렇게 만든 수정함수를 어떻게 쓰는지 살펴봅시다.

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

function 어떤컴포넌트() {
    let state = useSelector((state) => { return state })
    let dispatch = useDispatch();
    
    ...
    
    return (
    	<div>
            <button onClick={ () => { dispatch(changeName()) }}>
            버튼
            </button>
        </div>
    );
}

이런 식으로 수정함수를 import하고 useDispatch도 라이브러리에서 가져옵니다.

그리고 dispatch를 만들어서 이걸로 수정함수를 감싸서 사용하면 됩니다.

즉, dispatch(changeName()) 이 됩니다.

 

어떤 컴포넌트.js

저는 이렇게 post 요청을 보낸 값으로 유저 값을 받는데 그걸 위와 같이 값을 넣어 수정하였습니다.

dispatch(changeUser( { 'name' : 'new name' , 'loginId' : 'new Id' , 'role' : 'new role' })

이런 식으로 말입니다.

 

이렇게만 해도 Redux를 간편하게 쓸 수 있습니다.

만약 toolkit을 쓰지 않는다면 이것 보다 좀 더 복잡할 수 있습니다.

 

 

 

---

Vue.js 에는 vuex 라는 전역상태 관리 라이브러리가 있었는데 React.js에는 이렇게 Redux 같은 것들이 많습니다.

아무래도 Vue가 좀 더 편하지만 Vue만의 문법을 써야하고, React는 JS를 잘 알아야한다고 생각됩니다.