안녕하세요 !
전체적인 흐름 : https://heokknkn.tistory.com/21
저번에 ~ Redux의 관해서 대해서 공부를 해봤는데요 !
이번엔 여기서 react-redux에 기능중 !
useSelector과 useDispatch에 대해서 집중적으로 알아보려고 합니다 !!!
쉽게쉽게 풀어나가겠습니다 ! 아 ! 저는 Next JS에서 진행합니다 !! ( 리액트 환경에서 무난하게 돌아가니 너무 걱정마세요 ! )
useSelector이란?
https://react-redux.js.org/api/hooks
공식문서를 보면 ! useSelector를 사용하면 Redux의 store state에 데이터를 등록할 수 있습니다.
즉 !
등록 한 데이터를 가져와서 쓸 수 있다로 생각해주시면 편합니다 !!!
그럼 한번 소스로 확인해볼까요??
먼저 전체적인 흐름은 저번글에서 했습니다 !!!!
혹시나 하는분들은 한번 더 봐주세요 ^^
먼저 tsx파일에서 밑에와 같이 선언을 했습니다 !
kkana.tsx
참고로 저는 위에와 이름은 다르지만 혹시 모르니 아래에서 1번더 설명을 !
그러면 createStrore에서 지정해준 slice로 가봅시다 !
kkanaSlice.ts
Type는 사용하는 틀에 맞춰서 지정해주세요 !!!! ( 다들 타입스크립트를 씁시다 !! )
저번에도 한 부분이지만 ! 저 위에서 지정해준 초기값을(스테이트)를 리턴시켜줘야합니다 !
그래야 사용이 가능하겠죠?
import { createSlice } from '@reduxjs/toolkit'
export const initialState: GlobalHeaderStateType = {
kkanaData: [],
}
export const kkanaSlice = createSlice({
name: 'GlobalHeader',
initialState,
reducers: {
kkanaReducer: (state, action) => {
state.testValue = action.payload
},
},
})
export const { kkanaReducer } = kkanaSlice.actions
export const kkanaCounter = (value: number) => {
return (dispatch: any): void => {
dispatch(kkanaReducer(value+1))
}
}
export default kkanaSlice.reducer이런식으로요 ! ( 저번글에서 했습니당 ^^ )
마지막에 kkanaSlice.reducer을 해주면 !!! 리턴이 됩니다 !!
참고로 reducer을 리턴해줌으로써
슬라이스에 제공된 초기 상태 값에 대한 액세스를 제공합니다.
지연 상태 초기화가 제공되면 호출되고 새로운 값이 반환됩니다.
그래서 위에서 정의한 kkanaData를 사용 할 수 있습니다 !! 그럼 사용해봅시다 !
자 결과는???
이렇게 초기값을 잘 가지고 올 수 있습니다 !!!
그럼 여기서 !! 초기값을 가지고 뭘 할까요???
뭔가 데이터를 넣으면서 사용해야겠죠???
한번 사용해봅시다 !!
useDispatch
공식문서를 따르면 hook는 redux 저장소에서 함수에 대한 참조를 반환합니다. 필요에 따라 작업을 전달하는 데 사용할 수 있습니다.
즉 !!
redux의 액션 함수를 실행해서 redux store에 변경된 state값을 저장하기 위해서 useDispatch라는 리액트 훅을 사용하여 액션을 실행시켜야 합니다 !!!
조금 이해 가셨나요?? 그냥 간단하게 dispatch를 이용 -> 액션함수 실행 -> state저장 & 변경
코드로 봐봅시다 !
kkana.tsx
위에서 useDispatch를 써줍니다 !!!!
그리고 const dispatch = useDispatch()를 해주고요 !
또한 저는 여기서 액션함수를 처음에 실행시키 위해서 useEffect를 사용할겁니당 !
kkanaSlice.ts
위에처럼 액셤함수에서 비동기로 데이터를 가지고 와서 !! 리듀서로 보내줍니다 ! ( 함수명은 회사마다 다른데 액션을 일으킨다는 점은 같습니당 ! ex) update~~, action~~, ~~Action )
이렇게 하고 리듀서에서는 액셤함수에서 받은것을 그대로 써주기만 하면 됩니당 ! 그냥 저러면 끝 !!
자 이렇게 하고 로그를 찍어봐야겠죠?
결과는 !!!
성공입니다 !! 데이터를 온전하게 가지고 와서 잘 넣었습니다 !
정리
이번에는 useDispatch와useSelector를 알아봤습니다 !
많이 쉬었을거라고 생각합니다 !!!
간단히 말해서 !
useSelector으로 초기 상태값을 등록하고 !!!
useDispatch로 액션을 발생시켜서 상태값을 변경해줍니다 !!!
이해 안가는 부분이 있으면 언제든지 말씀해주세요 !!