[TIL] Week 14 라우팅과 API 통신 구현 - 카테고리 조회 & 회원가입

🧭 Route

React Router를 사용해 페이지들의 라우트를 작성해주려 한다. 

 

설치

`npm install react-router-dom @types/react-router-dom --save`

 

사용

// App.tsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/books",
    element: <div>도서 목록</div>
  }
])

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

주소에 맞는 화면이 잘 나오고 있다. 

 

만약 라우터에 설정해주지 않은 주소라면 react router dom의 기본 에러화면이 나타난다.

 

공통적으로 사용될 이 에러 화면도 따로 만들어주려고 한다.

import { useRouteError } from "react-router-dom";

interface RouterError {
    statusText?: string;
    message?: string;
}

function Error() {
    const error = useRouteError() as RouterError;
    return (
        <div>
            <h1>오류가 발생했습니다.</h1>
            <p>다음과 같은 오류가 발생했습니다.</p>
            <p>{error.statusText || error.message}</p>
        </div>
    )
}

어떤 에러가 났는지 함께 표시해주기 위해 `useRouteError`를 사용했다.

{
    path: "/",
    element: <Home />,
    errorElement: <Error />
  },

루트 페이지에 에러 화면을 적용해주면 모든 예외 경로에 대해 에러 화면이 나타나게 된다.

 

그런데 현재 헤더를 통해 주소가 달라질 때마다 화면이 깜빡거리는 현상이 있다.

페이지 이동이 자연스럽게 될 수 있도록 수정을 해주려 한다.

<h1 className="logo">
  <Link to="/">
    <img src={logo} alt="book store" />
  </Link>
</h1>

기존 a태그는 브라우저가 전체 페이지를 새로 불러오는 방식이라 이동할 때마다 전체를 다시 렌더링하여 깜빡임이 생겼다.

그래서 필요한 컴포넌트만 교체해주는 SPA방식의 Link태그로 교체해주었다. 

 

Link태그를 사용할 때에는 `href` 대신 `to`를 사용한다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout><Home /></Layout>,
    errorElement: <Error />
  },
  {
    path: "/books",
    element: <Layout><div>도서 목록</div></Layout>
  }
])

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

 

헤더에서 라우터를 사용하려면 `RouterProvider`안에 들어가야하기 때문에 `Layout`을 라우터 설정해주는 곳으로 이동시켰다. 

 

📚 모델 정의

추후 API 요청을 하며 받을 데이터들의 타입을 정의하는 모델들을 작성한다.

 

대표적으로 도서의 모델은 다음과 같다.

export interface Book {
    id: number;
    title: string;
    img: number;
    category_id: number;
    form: string;
    isbn: string;
    summary: string;
    detail: string;
    author: string;
    pages: number;
    contents: string;
    price: number;
    likes: number;
    pubDate: string;
}

여기서 도서의 상세 조회에는 카테고리명과 좋아요 여부가 추가되어있다.

 

이런 경우 같은 정보를 반복해 적기보단

export interface BookDetail extends Book {
    categoryName: string;
    liked: boolean
}

확장을 사용해 추가적인 정보만 입력해주면 간략하게 코드를 작성할 수 있다.

 

📡 API 통신 모듈 구성

API 요청 플로우

레이어를 고려해 설계하면

• 렌더 영역을 깔끔하게 유지 가능
• 훅을 통해 중복 코드 줄이고 훅 안에서 데이터 가공 로직을 제공 가능
• Fetcher 역시 분리해 API마다 달라질 수 있는 설정이나 변경사항 등에 대응 가능 

axios

• 백엔드 API에 요청을 보내고 응답을 받을 수 있도록 도와주는 도구
• `npm i axios`

// http.ts
import axios, { AxiosRequestConfig } from 'axios';

const BASE_URL = 'http://localhost:9999';
const DEFAULT_TIMEOUT = 30000;

export const createClient = (config?: AxiosRequestConfig) => {
    const axiosInstance = axios.create({
        baseURL: BASE_URL,
        timeout: DEFAULT_TIMEOUT,
        headers: {
            "content-type": "application/json",
        },
        withCredentials: true,
        ...config,
    });

    axiosInstance.interceptors.request.use(
        (response) => {
            return response;
        },
        (error) => {
            return Promise.reject(error);
        }
    );

    return axiosInstance;
};

export const httpClient = createClient();

API 요청을 보낼 때 공통으로 사용할 설정을 미리 정의한 파일

 

여기서 `config`는 createClient할 때 BASE_URL이 변경되거나 기존 config를 오버라이드할 때 사용된다.

 

✔️ 카테고리 조회 API

// category.api.ts
export const fetchCategory = async () => {
    const response = await httpClient.get<Category[]>('/category');
    return response.data;
}

앞서 정의한 httpClient로 '/category'라는 주소로 GET요청을 하는 Fetcher함수이다.

 

const [category, setCategory] = useState<Category[]>([]);

useEffect(() => {
    fetchCategory().then((category) => {
      setCategory(category);
    });
}, []);

 

해당 API 응답 데이터가 필요한 헤더에서 호출해주었다.

 

그런데 CORS에러가 발생했다.

프론트 포트는 3000인데 백엔드는 9999로 서로 달라 발생한 에러였다.

따라서 백엔드 코드에 CORS 허용 설정을 해주어야 한다.

 

먼저 관련 설정을 해주기 위해 `npm install cors`를 설치해주고

// app.js
const cors = require('cors');
app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}));

위 코드를 추가해 3000포트에 대해 허용을 해준다.

그럼 이제 3000포트에서도 9999로 요청이 잘 된다.

 

이번엔 카테고리를 조회하는 API를 다른 곳에서도 사용할 수 있도록 훅으로 제작하려고 한다.

export const useCategory = () => {
    const [category, setCategory] = useState<Category[]>([]);

    useEffect(() => {
      fetchCategory().then((category) => {
        if(!category) return;

        const categoryWithAll = [
            {
                id: null,
                name: "전체",
            },
            ...category
        ];

        setCategory(categoryWithAll);
      });
    }, []);

    return { category };
};

헤더에서 API호출하던 코드를 훅으로 가져왔다. 

 

반환할 때에는 전체 카테고리를 추가한 후 반환해주었다.

 

const { category } = useCategory();

이제 카테고리가 필요한 곳에서 `useCategory`훅으로 받아와 사용하면 된다.

 

API로 받아온 카테고리와 전체 카테고리까지 잘 나오고 있다.

 

✔️ 회원가입 

<form onSubmit={handleSubmit}>
    <fieldset>
        <InputText 
            placeholder="이메일" 
            inputType="email" 
            value={email} 
            onChange={(e) => setEmail(e.target.value)}
        />
    </fieldset>
    <fieldset>
        <InputText 
            placeholder="비밀번호" 
            inputType="password"
            value={password} 
            onChange={(e) => setPassword(e.target.value)}
        />
    </fieldset>
    <fieldset>
        <Button type="submit" size="medium" schema="primary">
            회원가입
        </Button>
    </fieldset>
    <div className="info">
        <Link to="/reset">비밀번호 초기화</Link>
    </div>
</form>

이렇게 작성하면 필드 개수가 늘어남에 따라 관리해야하는 상태값과 onChange도 끝없이 늘어난다.

그럼 상태관리도 어려워지고 validation도 어려줘지게 된다.

 

이런 폼 관리를 도와주는 React Hook Form이라는 라이브러리를 사용하려 한다. 

React Hook Form - performant, flexible and extensible form library

설치 

`npm install react-hook-form`

 

사용

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

interface SignupProps {
    email: string;
    password: string;
}

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

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

    return (
        <>
            <Title size='large'>회원가입</Title>
            <SignupStyle>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <fieldset>
                        <InputText 
                            placeholder="이메일" 
                            inputType="email"
                            {...register("email", {required: true})}
                        />
                        {errors.email && <p className="error-text">이메일을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <InputText 
                            placeholder="비밀번호" 
                            inputType="password"
                            {...register("password", {required: true})}
                        />
                        {errors.password && <p className="error-text">비밀번호를을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <Button type="submit" size="medium" schema="primary">
                            회원가입
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    );
}

입력을 반드시 해야한다는 속성인 `required: true`를 설정해서 입력하지 않았을 때 에러가 발생한다.

이 에러를 이용해 입력하지 않고 버튼을 누르는 경우 값을 입력해달라는 에러 텍스트가 나타나도록 해주었다.

 

이제 회원가입이 완료되면 성공했다는 alert창과 함께 로그인 페이지로 넘어가도록 해주려한다.

export const signup = async(userData: SignupProps) => {
    const response = await httpClient.post("/users/join", userData);
    return response.data;
}

먼저 입력받은 값을 회원가입 API에 보내고

const onSubmit = (data: SignupProps) => {
    signup(data).then((res) => {
        // 성공
        showAlert("회원가입이 완료되었습니다.");
        navigate("/login");
    })
};

요청이 성공한 경우 alert창을 띄우고 로그인페이지로 이동시키도록 했다.

export const useAlert = () => {
    const showAlert = useCallback((massage: string) => {
        window.alert(massage);
    }, []);

    return showAlert;
};

alert창의 경우 확장성을 위해 커스텀 훅으로 작성했다.

아직 로그인 페이지를 구현하지 않아 오류 페이지가 나오지만 주소를 보면 잘 이동되었다.