Redux 쓰는 방법 1

Redux 쓰면 뭐가 좋냐면

 

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

이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데

그걸 모든 컴포넌트가 직접 꺼내쓸 수 있습니다. 

그래서 귀찮은 props 전송이 필요없어집니다. 

컴포넌트가 많아질 수록 좋을듯.

 

그래서 사이트가 커지면 쓸 수 밖에 없어서 

개발자 구인시에도 redux같은 라이브러리 숙련도를 대부분 요구합니다. 

 

Redux 셋팅은 

1.state보관하는통만들기

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

2.index.js

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>
);

3.Redux store에 state 보관하는법

step 1. createSlice( ) 로 state 만들고

step 2. configureStore( ) 안에 등록하면 됩니다.

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

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

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

1. createSlice( ) 상단에서 import 해온 다음에

{ name : 'state이름', initialState : 'state값' } 이거 넣으면 state 하나 생성가능합니다. 

(createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 됩니다)

 

2. state 등록은 configureStore( ) 안에 하면 됩니다.

{ 작명 : createSlice만든거.reducer } 이러면 등록 끝입니다. 

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

 

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

import { useSelector } from "react-redux"

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

  return (생략)
}

이런식으로 써도됍니다.

let a = useSelector((state) => state.user )

store의 state 변경하는 법 

큰 그림부터 그리면

state 수정해주는 함수부터 store.js에 만들어두고

그걸 컴포넌트에서 원할 때 실행하는 식으로 코드를 짭니다. 

버튼누르면 예전에 'kim' 이라고 저장해놓은걸 'john kim' 으로 수정하고 싶으면 어떻게 해야할지 알아봅시다. 

1. store.js 안에 state 수정해주는 함수부터 만듭니다. 

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

- 함수 작명 맘대로 합니다.

- 파라미터 하나 작명하면 그건 기존 state가 됩니다.

- return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아치워줍니다. 

2. 다른 곳에서 쓰기좋게 export 해둡니다.

export let { changeName } = user.actions

3. 원할 때 import 해서 사용합니다. 근데 dispatch() 로 감싸서 써야함 

예를 들어서 Cart.js 에서 버튼같은거 하나 만들고

그 버튼 누르면 state를 'kim' -> 'john kim' 이렇게 변경하고 싶으면

 

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

(생략) 

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

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

- useDispatch 라는 것도 라이브러리에서 가져옵니다.

- 그리고 dispatch( state변경함수() ) 이렇게 감싸서 실행하면 state 진짜로 변경됩니다. 

 

Q. 컴포넌트에서 state 직접 수정하면 편하지 않나요?

그럼 당장은 편한데 나중에 프로젝트가 커지면 심각한 단점이 있을 수 있습니다. 

 

컴포넌트 100개에서 직접 'kim' 이라는 state 변경하다가

갑자기 'kim'이 123이 되어버리는 버그가 발생하면

범인 찾으려고 컴포넌트 100개를 다 뒤져야합니다. 

 

근데 state 수정함수를 store.js에 미리 만들어두고

컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜놓으면

'kim'이 123이 되어버리는 버그가 발생했을 때 범인찾기가 수월합니다.

범인은 무조건 store.js에 있으니까요. (수정함수를 잘 만들어놨다면)