[TIL] 원티드 프리온보딩_15일차_220517

Redux toolkit 공부하고 적용해보기 ❕

---

Redux Toolkit

• redux toolkit은 redux를 보다 더 쉽게 사용하기 위해 만들어졌다.
• redux는 복잡한 스토어(데이터 저장소) 설정 등 문제점이 있었고 이런 문제점들을 개선하기 위해 만들어졌다.

Redux Toolkit 사용하기 ✔

1. redux toolkit 설치
   npm install @reduxjs/toolkit

2. store등록
   configureStore

• 리덕스의 createStore함수를 추상화한 것

// states/index or store/index

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
	reducer: {}, // redeuce모아두는 것 필수! 5번에서 나온다.
})

• reducer
  리덕스 스토어의 rootReducer를 나타낸다.
  reducer에서 상태관리를 하며 데이터를 저장할 것이다 라고 나타낸다.

3. provider 적용

// index.tsx
...
import { store } from './store'
import { Provider } from 'react-redux';
...

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

• index.tsx에 Provider를 import하고 Provider로 감싸준다.
• store가 사용될 수 잇게 react app전체를 감싸도록 하는 것이라고 한다 => 자세한건 더 알아보기

4. Reducer 만들기!!

// states/test
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

const INITAL_STATE = {
  text: 'test의 initial 값입니당~',
}

export const testSlice = createSlice({
  name: 'test',
  initialState: INITAL_STATE,
  reducers: {
    searchValue: (state, action) => {
      state.text = action.payload
    },
  },
})

export const testActions = testSlice.actions // 변화할 때 필요하다. 7번에서 필요 
export default testSlice.reducer

createSlice는 기존에 createReducer와 createAction 이 하던 일을 같이 해준다. 즉 actions를 위한 파일을 또 만들지 않아도 된다는 것!

• name: reducer 이름
• initialState: default 값
• reducers: 상태가 변화하면 어떻게 실행될지 정의하는 부분

5. store에 저장하기!

// states/index
import { configureStore } from '@reduxjs/toolkit'
import test from './test'

export default configureStore({
	reducer: {
    	test,
    }, // 
})

6. Test컴포넌트에 적용해보기~

// Test
import { useSelector } from 'react-redux'
const value = useSelector((state) => state.test.text) // 가져오기

...
<div>{value}</div>

• 아래와 같이 redux에 저장된 데이터를 불러올 수 있다.
  

7. dispatch해보기

• useDispath를 import해준다.

import { useSelector, useDispatch } from 'react-redux' 
import { testActions } from 'states/test'
...
const dispatch = useDispatch()
const value = useSelector((state) => state.test.text) // 가져오기

const handleClick = () => {
	const value = '바뀌어용'
	dispatch(testActions.searchValue(value)) // reduce호출 후 dispatch
}

...

<div>{value}</div>
<button type='button' onClick={handleClick}>
	dispath해보아요
</button>

위와 같이 버튼을 만들고 클릭을 하게되면 아래와 같이 바뀌는 것을 확인할 수 있다.

---

강의

• 라우터는 최대한 간단하게 정리할 것
• useQuery에서 페이지네이션 하는 것이 있음 => 찾아볼 것!
• 렌더링을 최소화하기 위해 state와 상관없는 것들은 컴포넌트 밖으로 뺀다.
• 주석은 최소화로 하며, 주석이 없어도 한눈에 알아볼 수 있게 코드를 짜려고 노력하는 것이 더 중요하다
• return안에는 최대한 가독성이 좋게 작성하는 것이 매우매우 중요하다.
• useMemo 자세히 알아보기
• 폰트 lato는 숫자, noto는 한글이 이쁘지만 이 둘이 합쳐진 spoqa 폰트를 이용하면 됨! => 폰트 용량이 크니 서브셋파일로 받아 사용하면 된다.
• 배포할 때는 console과 같은 warning이 뜨는 것들도 모두 error처리를 하기 때문에 제거를 꼭 해주어야한다.

---

마무리..

오늘은 redux toolkit을 공부해보고 알아봤당. 조금 괜찮은듯 헷갈린다. 현재까지 리코일이랑 리덕스 둘 중에 뭐가 더 나은가 라고 한다면 아직은 리코일이다.. 리덕스 툴킷으로 리덕스가 조금은 편리해진것 같지만 그래도 리코일이 훨씬 작성하기 쉬운 것 같다.. 그리고 오늘 강의 시간에 배운 GA이벤트도 시간이 된다면 내 포트폴리오에 넣어봐야겠다!