[FE] 프로젝트에서 사용한 React Hook 정리

Hook 이란?

함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수

 

1️⃣useMemo

: 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅

: 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

 

<cart.tsx>

 const totalQuantity = useMemo(() => {
    return carts.reduce((acc, cart) => {
      if (checkedItems.includes(cart.id)) {
        return acc + cart.quantity;
      }
      return acc;
    }, 0);
  }, [carts, checkedItems]);

첫 번째 인자로 콜백 함수, 두 번째 인자로 의존성 배열을 받는다. 의존성 배열 안에 있는 값이 업데이트 될 때만 콜백 함수를 다시 호출하여 메모리에 저장된 값을 업데이트 해준다. 

 

2️⃣useNavigate

: 페이지를 이동할 수 있게 해주는 함수를 반환한다.

: 조건이 필요한 곳에서 호출해서 경로를 이동할 수 있다.

 

<기본 사용법>

import { useNavigate } from 'react-router-dom';

function Component() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/about');  // '/about' 페이지로 이동
  };

  return <button onClick={handleClick}>이동</button>;
}

 

<cart.tsx>

  const orderData: Omit<OrderSheet, "delivery"> = {
      items: checkedItems,
      totalPrice,
      totalQuantity,
      firstBookTitle: carts[0].title,
    };

    showConfirm("주문하시겠습니까?", () => {
      navigate("/order", { state: orderData });
    });

첫 번째 인자로는 경로를 전달, 두 번째 인자로는 이동시킬 페이지에 함께 보낼 데이터를 지정할 수 있다. 프로젝트에서는 cart.tsx 파일에서 useNavigate 를 사용해, orderData 정보를 order 페이지로 전달해주었다. 

 

3️⃣useLocation

: 현재 URL의 정보를 가져올 때 사용된다.

 

<기본 사용법>

import { useLocation } from 'react-router-dom';

function Component() {
  const location = useLocation();
  
  console.log(location.pathname); // 현재 경로
  console.log(location.search);   // 쿼리 스트링
  console.log(location.hash);     // 해시값
  console.log(location.state);    // 네비게이션으로 전달된 상태
}

 

location 객체의 주요 속성

 

pathname

• URL의 경로 부분
• 예: https://example.com/products → /products

search

• URL의 쿼리 스트링 부분
• 예: https://example.com/products?category=shoes → ?category=shoes

hash

• URL의 해시(#) 뒤 부분
• 예: https://example.com/products#reviews → #reviews

<state 활용>

// 페이지 A에서
navigate('/page-b', { state: { data: "전달할 데이터" } });

// 페이지 B에서
const location = useLocation();
const data = location.state?.data;

프로젝트에서는 이와 같은 방식으로 state를 활용하여 cart.tsx 파일에서 전달받은 orderData를 order.tsx 파일에서 전달받았다. 

 

4️⃣useForm

: React Hook Form 라이브러리에서 제공하는 폼 관리를 위한 Hook이다. 복잡한 폼 상태 관리와 유효성 검증을 쉽게 처리할 수 있게 해준다.

: useForm은  복잡한 폼 관리를 단순화하고, 성능을 최적화하며, 코드의 가독성을 향상시키는 강력한 도구이다. 

 

<기본 사용법>

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

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name", { required: "이름은 필수입니다" })} />
      {errors.name && <span>{errors.name.message}</span>}
      
      <button type="submit">제출</button>
    </form>
  );
}

프로젝트에서는 order.tsx 파일에서 주문서를 작성할 때 useForm 을 사용하였다. 

 

주요 기능

 

register

• 입력 필드를 폼에 등록
• 유효성 검증 규칙 설정 가능

handleSubmit

• 폼 제출 처리
• 유효성 검증 후 데이터 처리

formState

• 폼의 상태 정보 제공
• errors, isDirty, isSubmitting 등의 상태 확인 가능

---

🌟 배운 점

오늘은 장바구니 구현과 주문서 작성 구현을 했다. 점점 사용하는 Hook들이 많아져서, 무슨 역할을 하는지 모르겠어서 한 번 정리를 해봤다. 이렇게 정리를 해보니 어떤 상황에 어떻게 사용하는건지 이제서야 감이 잡힌다. 그래도 강의가 좀 익숙해졌는지 완벽하게 이해가 가지는 않아도, 어느 정도 대충 알아들을 수는 있는 수준이 된 것 같다. 오늘 배운 훅들을 잘 기억해두고, 팀 프로젝트를 할 때 잘 써먹어야겠다.