[Next] RTK & React query & react-hook-form 간단 정리

요즘 정말 🔥 Hot한 React-query와 RTK를 간단하게 사용해 보게 되어,
실제로 사용해보기 전에 기록하면서 다시 한번 더 리마인드해야겠다.

react-query와 상태관리를 주제로 2월 22일에 진행했던 배달의민족 우아한테크세미나
https://www.youtube.com/watch?v=MArE6Hy371c

RTK

Redux ToolKit은 Redux를 조금 더 쉽게 사용하도록 만들어진 도구모음이다.
createSlice를 사용하면 createAction, createReducer 함수가 내부적으로 사용되어
createSlice에 선언된 슬라이스 이름 을 따라서
리듀서와 그리고 그것에 상응하는 액션 생성자와 액션 타입을 자동으로 생성 한다.

공식 문서에서는 슬라이스 파일은 feature 폴더 안에서 상태 도메인 별로 나누어 정리하고 있다고 한다.

⚙️ features/Line/lineSlice.ts

선택 된 값이 담긴 payload로 state를 바꿔주는 간단한 slice를 작성해보았다.
name을 line 정의하였기 때문에
중간에 console.log 을 찍어서 확인을 해보면
action의 type은 name/fn 으로 찍히는 걸 알수 있다
payload 에는 component에서 dispatch로 사용해서 전달 한 값이 찍혀있다.

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  line: '선택된 라인이 없습니다',
};

export const LineSlice = createSlice({
  name: 'LINE',
  initialState,
  reducers: {
    pick: (state, action) => {

      console.log(action); // {type: 'LINE/pick', payload: '해달 라인'}

      state.line = action.payload;
    },
  },
});

export const { pick } = LineSlice.actions;

export default LineSlice;

---

⚙️ features/store.ts

export default LineSlice 경우

import { configureStore } from '@reduxjs/toolkit';
import LineSlice from './Line/lineSlice';
export function makeStore() {
  return configureStore({
    reducer: {
     [LineSlice.name]: LineSlice.reducer, // 리듀서가 많을 때 배열로 전달하기
    },
  });
}
// 스토어 만드는 코드 

export default LineSlice.reducers 경우

import { configureStore } from '@reduxjs/toolkit';
import LineSlice from './Line/lineSlice';
export function makeStore() {
  return configureStore({
    reducer: {
     LINE : LineSlice,
    },
  });
}
// 스토어 만드는 코드 

이전에는 redux를 사용하면서 action 타입을 정의하고 action을 만들고.. 등등
작업이 많았는데 slice를 사용하니 간단하게 사용할 수 있는게 느껴졌다
앞으로 자주 사용할텐데 빨리 익숙해졌으면 좋겠다 🤧

---

react-query

useQuery

첫번째인자로 key 값을 넣어주면 다른 위치에서도 값을 사용할 수 있다는 설명이 있는데,
아직 저렇게 사용해보지는 않아서 정확히 어떻게 이루어지는지는 잘 모르겠다 🧐

import { useQuery } from 'react-query';
const { data, isLoading } = useQuery('user', getUserInfo);

get 요청으로 데이터를 받아와서 사용한다!

useMutation

useMutation에 함수를 전달해주면서 mutate를 꺼내온다
mutate에 첫번째 인자로 데이터를 전달해주고 onSuccess 와onError 로
데이터를 전달 한 뒤에 후속처리를 해준다

get요청을 제외 한 patch,post 등에 사용된다

import { useMutation } from 'react-query';

const { isLoading, mutate } = useMutation(updateUserInfo);

const onSubmit = (data: UserModelDataType) =>
  mutate(data, {
    onSuccess: () => {
      onClose();
    },
    onError: (err) => {
      alert(err.errorMessage);
    },
  });

---

react-hook-form

import { useForm } from 'react-hook-form';

const { register, handleSubmit, formState: { errors }} = useForm({defaultValues: { name } });

{...register('name')} input 안에 register를 넣어주면 watch로 확인도 할 수 있고
handleSubmit 으로 값을 한번에 전달 할수도있다
{ validate: (value) => value !== '' } 처럼 error 처리 될 경우도 지정해 줄 수 있다

처음으로 사용해보게 되었는데 next에서 사용하게되니까 약간 헷갈렸었다
공식문서가 잘 되어있어서 금방 잘 사용할 수 있게 되었다

사용할 수 있는 기능이 굉장히 많았는데 약간의 찍먹으로 마무리 지었다 🙂
나중에 다시 사용하게 된다면 좀 더 많은 유효성검사를 해서 사용해봐야겠다

---

ETC

input 태그는 무조건 label 태그와 함께 써야한다
button 태그로 조정 할 때에는 내부를 span을 이용하여 만들어야 한다

---

래퍼런스

http://blog.hwahae.co.kr/all/tech/tech-tech/6946/
https://react-hook-form.com/get-started