State를 효율적으로 관리하는 Redux
✅ Redux 쓰면 뭐가 좋을까?
Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다.
Redux를 설치하면 js 파일 하나에 state들을 보관할수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있다
그래서 귀찮은 prpos 전송이 필요없어진다. 컴포넌트가 많을수록 편리해짐
그래서 사이트가 커지면 쓸수 밖에 없으니
한번 배워보자
핵심 개념
Redux는 state를 보관하여 모든 컴포넌트가 사용가능하게 하는 라이브러리
✅ Redux 설치는
npm install @reduxjs/toolkit react-redux 터미널에 입력하면 된다.
참고로 redux toolki라는 라이브러리를 설치할건데 redux의 개선 버전이라고 생각하면 된다
근데 설치하기 전에 packge.json 파일 열어서 "react" "react-dom" 항목의 버전을 확인하자 이거 두개가 18.1.x 이상이면 사용가능하다.
그게 아니면 직접 두개를 18.1.0 이렇게 수정한 다음 파일 저장후 터미널에 npm install 입력하면 된다
핵심 개념
Redux 설치는
npm install @reduxjs/toolkit react-redux
✅ Redux 셋팅은
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: { }
})1.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>
); 2.index.js 또는 main.jsx 파일가서 Provider 라는 컴포넌트와 아까 작성한 파일을 import 해온다.
그리고 밑에 <Provider store={import해온거} 이걸로 을 감싸면 된다.
그럼 이제 과 모든 자식 컴포넌트들은 store.js에 있던 state를 맘대로 꺼내쓸 수 있다.
핵심 개념
Redux 설치는 셋팅은 검색해서 하면 된다.
✅ Redux store에 state 보관하는법
store.js 파일에 state를 만들려면 이렇게 하면된다
step 1.createSlice()로 state만들고
step 2.configureStore() 안에 등록하면 된다
//(store.js)
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 모든 컴포넌트가 자유롭게 사용가능
핵심 개념
state 생성은 createSlice() state 등록은 configureStore()
✅ 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 쓰는법은 useSelector((state)=>{return state})
✅ Redux 변경하는법
Redux의 state를 변경하고 싶으면
1.store.js에 변경해주는 함수부터 만들고
2.export 해두고
3.필요할떄 import 해서 쓰면 되는데 dispatch()로 감싸서 써야한다
좀 복잡하네요
1.store.js 안에 state 수정해주는 함수부터 만들자
let user = createSlice({
name : 'user',
initialState : 'kim',
reducers : {
changeName(state){
return 'john ' + state
}
}
})slice 안에 reducers : {} 열고 거기 안에 함수 만들면 된다.
- 함수 작명 맘대로 한다
- 파라미터 하나 작명하면 그건 기존 state가 된다
- return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아치워 준다.
2.다른곳에서 쓰기 좋게 export 해둔다
export let { changeName } = user.actions 이런 코드를 store.js 밑에 추가하면 된다.
3.원할 떄 import 해서 사용한다. 근데 dispatch()로 감싸서 써야한다.
예를 들어서 Cart.js에서 버튼 같은걸 하나 만들고 그 버튼 누르면 state를 'kim' -> 'john kim' 이렇게 변경하고 싶으면
(Cart.js)
import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"
(생략)
<button onClick={()=>{
dispatch(changeName())
}}>버튼임</button> 이렇게 코드 짜면 된다
- store.js에서 원하는 state 변경함수 가져오면 되고
- useDispatch 라는 것도 라이브러리에서 가져온다
- 그리고 dispatch(state변경함수()) 이렇게 감싸서 실행하면 변경이 된다
dispatch로 꼭 감싸야 실행된다
핵심 개념
Redux의 state를 변경하고 싶으면
1.store.js에 변경해주는 함수부터 만들고
2.export 해두고
3.필요할떄 import 해서 쓰면 되는데 dispatch()로 감싸서 써야한다
✅ 이렇게 복잡한데 왜 쓰는걸까?
Q.왜 이렇게 복잡한가요?
Reudx 만든 사람이 저렇게 쓰래요
Q.컴포넌트에서 state 직접 수정하면 편리하지 않나요?
그럼 당장은 편한데 나중에 프로젝트가 커지면 심각한 단점이 있을 수 있다.
컴포넌트 100개에서 직접 'kim'이라는 state 변경하다가 갑자기 'kim'이 123이 되어 버리는 버그가 발생하면 범인 찾으려고 컴포넌트 100개를 다 뒤져야 한다.
근데 state 수정함수를 store.js에 미리 만들어두고
'kim'이 123이 되어버리는 버그가 발생했을떄 범인 찾기가 수월하다.
범인은 무조건 store.js에 있으니까
그런 장점 떄문에 이렇게 코드를 짜는 것이다.
본 글은 코딩애플 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다.
