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에 있으니까요. (수정함수를 잘 만들어놨다면)
'리액트 > 리덕스( Redux Toolkit)' 카테고리의 다른 글
redux state가 array/object인 경우 변경하려면 (0) | 2022.06.01 |
---|