230711 React Query

📌 React Query란?

1) 등장 배경

Redux-thunk, Redux-Saga와 같은 기존의 미들웨어는 코드량이 너무 많고, Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니라는 문제가 있다. 이러한 문제점을 보안하기 위해 React Query가 등장한다. React Query는 보일러 플레이트를 만들다가 오류가 날 일이 없고, 사용방법이 thunk에 비해 쉽고 직관적이다.

2) 주요 키워드

• Query : 데이터에 대한 요청을 의미

• Mutation : 데이터에 대한 변경을 의미 (추가/수정/삭제, 즉 CUD)

• Query Invaildation : Query를 무효화 시킨다는 의미

  무효화 시킨다는 무슨 의미? 기존에 가져온 Query는 서버 데이터이기 때문에 언제든지 변경이 있을 수 있다. 즉 최신 상태가 아닐 수 있다. 이런 경우 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 한다.

📌 React Query 사용하기

1) 패키지 설치하기

yarn add react-query

2) App.jsx(상위컴포넌트)에서 React Query 관련 설정하기

import React from "react";
import Router from "./shared/Router";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  );
};

export default App;

3) .env 생성 (환경정보 관리)

REACT_APP_SERVER_URL = http://localhost:4000

4) src > api > todos.js 생성

// axios 요청이 들어가는 모든 모듈
import axios from "axios";

// 조회
const getTodos = async () => {
  const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`);
  return response.data;
};

export { getTodos };

5) Todolist.jsx 컴포넌트 내에서 가져온 데이터 조회하기

import React from "react";
import { StyledDiv, StyledTodoListHeader, StyledTodoListBox } from "./styles";
import Todo from "../Todo";
import { getTodos } from "../../../api/todos";
import { useQuery } from "react-query";

/**
 * 컴포넌트 개요 : 메인 > TODOLIST. 할 일의 목록을 가지고 있는 컴포넌트
 * 2022.12.16 : 최초 작성
 *
 * @returns TodoList 컴포넌트
 */
function TodoList({ isActive }) {
  // const todos = useSelector((state) => state.todos);

  // 데이터 조회
  // useQuery의 첫번째 인자는 쿼리의 이름(쿼리키!!), 쿼리함수!!(조회를 하는 비동기 함수,api)
  // 리액트 쿼리에서는 useQuery의 결과값(객체)으로 isLoding, isError, data를 모두 제공
  // 구조분해할당으로 받아오기
  const { isLoding, isError, data } = useQuery("todos", getTodos);

  if (isLoding) {
    return <h1>로딩중입니다...</h1>;
  }
  if (isError) {
    return <h1>오류 발생!!</h1>;
  }

  return (
    <StyledDiv>
      <StyledTodoListHeader>
        {isActive ? "해야 할 일 ⛱" : "완료한 일 ✅"}
      </StyledTodoListHeader>
      <StyledTodoListBox>
        {data
          .filter((item) => item.isDone === !isActive)
          .map((item) => {
            return <Todo key={item.id} todo={item} isActive={isActive} />;
          })}
      </StyledTodoListBox>
    </StyledDiv>
  );
}

export default TodoList;

6) src > api > todos.js에서 데이터 추가 요청하기

// axios 요청이 들어가는 모든 모듈
import axios from "axios";

// 조회
const getTodos = async () => {
  const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`);
  return response.data;
};

// 추가
const addTodo = async (newTodo) => {
  await axios.post(`${process.env.REACT_APP_SERVER_URL}/todos`, newTodo);
};

export { getTodos, addTodo };

7) Input.jsx 컴포넌트 내에서 추가하는 기능이 리액트 쿼리를 통해 동작하도록 하기

// (1) 만들어 놓은 api import 하기
import { addTodo } from "../../../api/todos";

// (2) useQueryClient() 이용하기
// useQueryClient를 통해 상위컴포넌트에서 만든 것을 이용해서
// 하나의 흐름으로서 쿼리 클라이언트를 이용할 수 있음
const queryClient = useQueryClient();

// (3) Mutation
// useMutation의 첫번째 인자로는 만들어 놓은 api, 두번째 인자로는 객체가 들어감
// 객체에는 성공과 실패에 대한 키벨류가 들어감
const mutation = useMutation(addTodo, {
  // (4) invalidate (바로 갱신!)
  onSuccess: () => {
    // [성공] "todos"로 읽어 온 데이터를 무효화하고 다시 불러옴!
    queryClient.invalidateQueries("todos");
    console.log("성공하였습니다!");
  },
});

// (5) dispatch로 호출했던 부분을 다음과 같이 작성
// api에 대한 인자를 넣어줌
mutation.mutate(newTodo);

Input.jsx 전체 코드

import React, { useState } from "react";
import LabledInput from "../common/LabledInput";
import HeightBox from "../common/HeightBox";
import { StyledButton } from "./styles";
import { FlexDiv } from "./styles";
import RightMarginBox from "../common/RightMarginBox";
import "./styles";
import { StyledDiv } from "./styles";
import { useDispatch, useSelector } from "react-redux";
import { v4 as uuidv4 } from "uuid";
// import { addTodo } from "../../modules/todos";
// (1) 만들어 놓은 api import 하기
import { addTodo } from "../../../api/todos";
import { useMutation, useQueries, useQueryClient } from "react-query";

/**
 * 컴포넌트 개요 : Todo 메인 페이지에서 제목과 내용을 입력하는 영역
 * 2022.12.16 : 최초 작성
 *
 * @returns Input 컴포넌트
 */
function Input() {
  const dispatch = useDispatch();

  // (2) useQueryClient() 이용하기
  // useQueryClient를 통해 상위컴포넌트에서 만든 것을 이용해서
  // 하나의 흐름으로서 쿼리 클라이언트를 이용할 수 있음
  const queryClient = useQueryClient();

  // (3) Mutation
  // useMutation의 첫번째 인자로는 만들어 놓은 api, 두번째 인자로는 객체가 들어감
  // 객체에는 성공과 실패에 대한 키벨류가 들어감
  const mutation = useMutation(addTodo, {
    // (4) invalidate (바로 갱신!)
    onSuccess: () => {
      // [성공] "todos"로 읽어 온 데이터를 무효화하고 다시 불러옴!
      queryClient.invalidateQueries("todos");
      console.log("성공하였습니다!");
    },
  });

  // useSelector를 통한, store의 값 접근
  const todos = useSelector((state) => state.todos);

  // 컴포넌트 내부에서 사용할 state 2개(제목, 내용) 정의
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

  // 에러 메시지 발생 함수
  const getErrorMsg = (errorCode, params) => {
    switch (errorCode) {
      case "01":
        return alert(
          `[필수 입력 값 검증 실패 안내]\n\n제목과 내용은 모두 입력돼야 합니다. 입력값을 확인해주세요.\n입력된 값(제목 : '${params.title}', 내용 : '${params.contents}')`
        );
      case "02":
        return alert(
          `[내용 중복 안내]\n\n입력하신 제목('${params.title}')및 내용('${params.contents}')과 일치하는 TODO는 이미 TODO LIST에 등록되어 있습니다.\n기 등록한 TODO ITEM의 수정을 원하시면 해당 아이템의 [상세보기]-[수정]을 이용해주세요.`
        );
      default:
        return `시스템 내부 오류가 발생하였습니다. 고객센터로 연락주세요.`;
    }
  };

  // title의 변경을 감지하는 함수
  const handleTitleChange = (event) => {
    setTitle(event.target.value);
  };

  // contents의 변경을 감지하는 함수
  const handleContentsChange = (event) => {
    setContents(event.target.value);
  };

  // form 태그 내부에서의 submit이 실행된 경우 호출되는 함수
  const handleSubmitButtonClick = (event) => {
    // submit의 고유 기능인, 새로고침(refresh)을 막아주는 역함
    event.preventDefault();

    // 제목과 내용이 모두 존재해야만 정상처리(하나라도 없는 경우 오류 발생)
    // "01" : 필수 입력값 검증 실패 안내
    if (!title || !contents) {
      return getErrorMsg("01", { title, contents });
    }

    // 이미 존재하는 todo 항목이면 오류
    const validationArr = todos.filter(
      (item) => item.title === title && item.contents === contents
    );

    // "02" : 내용 중복 안내
    if (validationArr.length > 0) {
      return getErrorMsg("02", { title, contents });
    }

    // 추가하려는 todo를 newTodo라는 객체로 세로 만듦
    const newTodo = {
      title,
      contents,
      isDone: false,
      id: uuidv4(),
    };

    // todo를 추가하는 reducer 호출
    // 인자 : payload
    // dispatch(addTodo(newTodo));

    // (5) dispatch로 호출했던 부분을 다음과 같이 작성
    // api에 대한 인자를 넣어줌
    mutation.mutate(newTodo);

    // state 두 개를 초기화
    setTitle("");
    setContents("");
  };

  return (
    <StyledDiv>
      <form onSubmit={handleSubmitButtonClick}>
        <FlexDiv>
          <RightMarginBox margin={10}>
            <LabledInput
              id="title"
              label="제목"
              placeholder="제목을 입력해주세요."
              value={title}
              onChange={handleTitleChange}
            />
            <HeightBox height={10} />
            <LabledInput
              id="contents"
              label="내용"
              placeholder="내용을 입력해주세요."
              value={contents}
              onChange={handleContentsChange}
            />
          </RightMarginBox>
          <StyledButton type="submit">제출</StyledButton>
        </FlexDiv>
      </form>
    </StyledDiv>
  );
}

export default Input;