[Week12] React(TypeScript) 기반의 동적 UI 개발(4)

지난 시간에 이어 북스토어 프로젝트를 계속 진행해 볼게요. 이번 시간에는 라우팅을 설정하고, 데이터 모델(타입)을 작성하며 서버와 통신하는 과정을 정리해 볼게요.

라우터 (React-Router-Dom)

화면을 이동하기 위해서는 URL을 사용해요. URL과 화면 컴포넌트를 일치시키는 라우팅 작업을 위해 React-Router-Dom 패키지를 활용해요. 타입스크립트 환경에서는 타입 정의가 필요하므로 @types/react-router-dom 도 함께 설치해 주어야 해요.

createBrowserRouter 함수를 사용해 경로(path)와 컴포넌트(element)를 연결하고, RouterProvider 컴포넌트를 사용해 화면에 렌더링해요.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

데이터 모델 관리 (Model 폴더)

서버와 통신할 때 프론트엔드에서 어떤 형태의 데이터를 받을지 미리 정의해 두는 것이 중요해요. 이러한 타입(인터페이스)들을 모아서 관리하는 곳이 model 폴더예요. 파일 이름을 지을 때는 user.model.ts 처럼 확장자 앞에 역할을 명시하면 구분하기 편리해요.

자바스크립트처럼 매번 데이터의 존재 여부를 런타임에 확인하는 대신, 미리 인터페이스를 만들어 타입을 지정해 두면 개발 단계에서 오류를 쉽게 방지할 수 있어요.

// models/user.model.ts
export interface User {
  id: number;
  email: string;
  password?: string;
}

서버 통신과 CORS 에러 (Axios)

서버와 통신하는 방법에는 여러 가지가 있지만, 이번 프로젝트에서는 Axios 라이브러리를 활용해 서버와 데이터를 주고받아요.

백엔드 서버와 연결하는 과정에서 CORS 에러가 발생할 수 있어요. 이 문제는 프론트엔드가 아닌 백엔드 서버 측에서 CORS 정책을 허용해 주는 방식으로 해결해야 해요.

React Hook Form

회원가입과 같은 폼(Form) 화면을 만들 때 기본 onChange 속성이나 제출 로직을 일일이 작성하면 코드가 매우 길어지고 복잡해져요. 이를 보완하기 위해 React Hook Form 라이브러리를 사용해요.

useForm() 훅을 사용하면 입력값을 추적하는 register , 제출 이벤트를 관리하는 handleSubmit , 그리고 유효성 검사 에러를 확인할 수 있는 formState.errors 등의 유용한 기능을 제공받을 수 있어요.

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

interface FormData {
  email: string;
}

function SignUpForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email", { required: true })} />
      {errors.email && <span>이메일은 필수 항목이에요.</span>}
      <button type="submit">가입하기</button>
    </form>
  );
}

추가로 폼 내부에서 버튼이나 인풋 같은 HTML 태그를 커스텀 컴포넌트로 만들 때, React.ButtonHTMLAttributes<HTMLButtonElement> 와 같은 타입을 상속받으면 기존 속성들을 props 로 쉽게 넘겨받아 사용할 수 있어요.

import React from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  customColor?: string;
}

const CustomButton: React.FC<ButtonProps> = ({ customColor, children, ...props }) => {
  return (
    <button style={{ backgroundColor: customColor }} {...props}>
      {children}
    </button>
  );
};

export default CustomButton;