Redux

Redux 는 props 없이 state 를 공유할 수 있게 도와주는 라이브러리이다. 

 

Redux 설치하면 js 파일 하나에 state 들을 보관할 수 있는데, 모든 컴포넌트들이 직접 꺼내서 사용할 수 있다. 

따라서 귀찮은 props 전송이 필요가 없어진다. 

 

 

Redux 설치하기 

 

npm install @reduxjs/toolkit react-redux

터미널에 입력해주면 설치된다. 

 

redux toolkit 은 redux 의 개선버전이라고 생각하면 된다. ( 문법이 좀 쉬워진 )

 

설치 전 pakage.json 파일에서 "react", "react-dom" 항목의 버전이 18.1 이상인 것을 확인하자

 

 

 

 

Redux 세팅

 

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
	reducer: { }
})

먼저 store.js 파일 생성하여 위 코드를 작성해준다. 

 

state 들을 보관하는 파일이다. 

 

 

 

import { Provider } from "react-redux";
import store from './store.js'

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

index.js 에서 Provider 라는 컴포넌트와 작성한 파일을 import 해온 후 

 

<Provider store={import 해온 것}> 으로 <App/> 를 감싸준다. 

 

그러면 <App/> 과 모든 자식 컴포넌트에서 store.js 에 저장한 state 를 꺼내 사용할 수 있다. 

 

 

 

 

 

 

 

Redux store 에 state 보관하는 방법

 

store.js 파일에 다음과 같이 코드 짜면 state 를 만들 수 있다. 

 

1. createSlice() 로 state 만들고

 

2. configureStore() 안에 등록해준다. 

 

 

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

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

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

 

상단에 createSlice() 를 import 한 후 

 

{name: 'state이름', initialState: 'state값'} 입력하면 state 가 생성된다. 

 

createSlice() 는 useState() 유사하다고 보면 됨.

 

 

state 등록은 configureStore() 안에 하면된다. 

 

{작명 : createSlice만근거.reducer} 이런 식으로 작성하면 등록된다. 

 

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

 

 

 

 

 

 

 

Redux store에 있던 state 가져다 쓰는 법

 

(Cart.js)

import { useSelector } from "react-redux"

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

  return ...
}

 

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

 

 

 

컴포넌트의 개수가 엄청 많아지면 state 관리할 때 Redux 사용하면 편리하지만, 간단한 프로젝트를 만들거나, 컴포넌트의 개수가 몇개 없을 땐 props 쓰는 것이 코드가 짧고 편리할 수 있다. 

 

 

 

 

 

 

 

store 의 state 변경하는 법

 

state 수정하는 함수를 store.js 에 만든다. 

 

 

 

 

store.js 안에 state 수정하는 함수부터 만든다.

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
})

 

slice 안에 reducers:{} 열고 그 안에 함수 만들면 된다. 

 

- 함수 작명 마음대로

- 파라미터 하나 작명하면 그 파라미터는 기존 state 가 된다. 

- return 우측에 새로운 state 입력하면 그걸로 기존 state 를 변경해준다. 

 

 

 

다른 파일에서도 쓸 수 있도록 export 해준다. 

export let { changeName } = user.actions

store.js 에 위의 코드를 추가해준다. 

 

slice.이름.actions 라고 적으면 state 변경함수가 전부 그 자리에 출력된다. 

 

그걸 변수에 저장했다가 export 하는 것

 

 

 

 

 

 

원할 때 import 해서 사용. dispatch() 함께 사용

 

예를 들어 Cart.js 에 버튼 하나 만들어서 버튼 눌렀을 때 함수 실행하여 텍스트 변경하고 싶을 때,

 

(Cart.js)

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

(생략) 

<button onClick={()=>{
  dispatch(changeName())
}}>버튼</button>

 

- store.js 에서 원하는 state 변경함수 가져오고,

- useDispatch 를 라이브러리에서 가져온다. 

- dispatch(state변경함수()) 이런식으로 사용하면 state 가 변경된다. 

 

 

 

 

 

 

 

위와같은 방식으로 state 변경함수 사용하는 이유

 

컴포넌트에서 state 직접 수정하면 편하지 않나 라고 생각할 수 있다. 

당장은 편하지만 나중에 프로젝트가 커질 때 심각한 단점이 있을 수 있다.

 

예를들어 컴포넌트 100개에서 직접 'kim' 이라는 state 변경을 하다가 갑자기 123이 되는 버그를 발생하면 이유를 찾기위해

100개의 컴포넌트를 다 뒤져보아야한다. 

 

하지만 state 수정함수를 store.js 에 미리 만들어놓고 컴포넌트는 함수 실행해달라고 부탁하는 식으로 코드를 짜면 버그가 

발생했을 때 찾기가 훨씬 수월해진다. 

 

 

 

 

 

 

Redux state 가 array / object 인 경우 변경

 

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      return {name : 'park', age : 20}
    }
  }
})

 

위의 코드처럼 object 의 값을 변경해주고 싶을 때 return 옆에 저런 방식으로 작성해주어도 된다. 

 

 

하지만, array 나 object 자료형은 state 를 직접 수정하려해도 잘 변경이 된다. 

 

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
})

Immers.js 라이브러리가 state 사본을 하나 더 생성해주는 덕분

 

Redux 설치하면 Immers 따라옴

 

 

array / object 자료형은 state 를 직접 수정해도 잘 동작하니 직접 수정하자

 

따라서 state 만들 때 문자나 숫자 하나만 필요해도 redux 에서는 일부로 object 아니면 array 에 담아

수정을 편리하게 하는 경우도 있다. 

 

 

 

 

 

 

 

 

state 변경함수 파라미터 넣기

 

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){
      state.age += a.payload
    }
  }
})

위처럼 해당 increase 함수에서 파라미터를 선언하여 함수 사용하는 곳에서 받아올 수 있다. 

 

파라미터 자리에 넣은 자료들은 a.payload 쓰면 사용할 수 있다. 

 

 

a 말고 관습적으로 action 으로 작명한다. 

action.type 은 state 변경함수의 이름이 나오게 하고, 

action.payload 는 파라미터가 나온다.