쿠팡이츠, React와 Apollo Client에서 사용되는 핵심 Hooks 간략한 소개

들어가며

이번 글에서는 프로젝트에서 자주 마주치게 될 몇 가지 주요 훅들을 소개합니다. 프로젝트에 참여하기 전에 이러한 도구들의 기본 개념을 미리 파악하는 것이 도움이 됩니다. React와 Apollo Client는 현대 웹 개발에서 필수적인 도구로, 다양한 내장 훅을 통해 애플리케이션의 상태 관리와 데이터 통신을 효율적으로 수행할 수 있게 해줍니다. 이 글에서는 useForm, useNavigate, useMutation, useEffect, useQuery, useParams, useState, useApolloClient 등의 훅들을 자세히 설명하고 예시 코드를 통해 각 훅의 사용 방법을 살펴보겠습니다.

1. useState

useState는 컴포넌트 내의 상태를 관리하는 가장 기본적인 훅입니다. 이 훅을 사용하면 함수형 컴포넌트에서 상태를 가질 수 있습니다.

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

2. useEffect

useEffect는 함수형 컴포넌트에서 부작용을 수행할 수 있게 해주는 훅입니다. 데이터 fetching, 구독 설정, 수동 DOM 조작 등에 주로 사용됩니다.

import React, { useState, useEffect } from 'react';

function User({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetch(`https://api.example.com/users/${userId}`)
            .then(response => response.json())
            .then(data => setUser(data));
    }, [userId]);  // userId가 변경될 때마다 이펙트 실행

    return (
        <div>
            <h1>{user?.name}</h1>
        </div>
    );
}

3. useApolloClient

useApolloClient는 Apollo Client 인스턴스에 직접 접근할 수 있게 해주는 훅입니다. 이를 통해 캐시를 직접 조작하거나 클라이언트 메소드를 직접 호출할 수 있습니다.

import { useApolloClient } from '@apollo/client';

function LogoutButton() {
    const client = useApolloClient();
    const handleLogout = () => {
        client.resetStore();
    };

    return <button onClick={handleLogout}>Logout</button>;
}

4. useQuery와 useMutation

Apollo Client의 useQuery와 useMutation은 각각 GraphQL 쿼리와 뮤테이션을 실행하는 훅입니다. 이 훅들은 데이터 로딩, 오류 처리, 결과 관리를 자동으로 처리해줍니다.

import { useQuery, useMutation, gql } from '@apollo/client';

const GET_USER = gql`
query GetUser($id: ID!) {
    user(id: $id) {
        name
        email
    }
}`;

const UPDATE_USER = gql`
mutation UpdateUser($id: ID!, $email: String!) {
    updateUser(id: $id, email: $email) {
        id
    }
}`;

function User({ userId }) {
    const { data, loading } = useQuery(GET_USER, { variables: { id: userId } });
    const [updateUser] = useMutation(UPDATE_USER);

    if (loading) return <p>Loading...</p>;

    return (
        <div>
            <p>{data.user.name}</p>
            <button onClick={() => updateUser({ variables: { id: userId, email: "new@example.com" } })}>
                Update Email
            </button>
        </div>
    );
}

5. useParams

useParams는 React Router의 일부로, URL 매개변수를 컴

포넌트 내에서 직접 사용할 수 있게 해주는 훅입니다. 동적 라우팅을 구현할 때 유용합니다.

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

function UserProfile() {
    const { userId } = useParams();

    return <h1>User ID: {userId}</h1>;
}

비슷한 역할로 useLocation()이 있습니다. 사용하기에는 useParams()가 더 편합니다.

6. useNavigate

useNavigate는 프로그래밍 방식으로 네비게이션을 실행할 수 있게 해주는 React Router의 훅입니다. 폼 제출이나 로그인/로그아웃 이벤트 후 리다이렉트를 처리하는 데 특히 유용합니다.

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

function HomeButton() {
    let navigate = useNavigate();
    return (
        <button onClick={() => navigate('/')}>
            Go to Home
        </button>
    );
}

7. useForm

useForm은 React Hook Form 라이브러리에서 제공하는 훅으로, 폼 관리와 검증을 간소화합니다. 이 훅을 사용하면 폼 관리와 상태 관리를 위한 보일러플레이트 코드를 줄일 수 있으며, 폼 검증을 간단하고 효율적으로 만들어 줍니다.

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

function LoginForm() {
    const { register, handleSubmit, errors, getValues } = useForm();
    const onSubmit = data => console.log(data);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input name="username" ref={register({ required: true })} />
            {errors.username && <span>This field is required</span>}
            <input name="password" type="password" ref={register({ required: true })} />
            {errors.password && <span>This field is required</span>}
            <input type="submit" />
        </form>
    );
}

이러한 훅들은 현대적인 웹 애플리케이션 개발에서 매우 유용하며, 상태 관리와 데이터 통신, UI 네비게이션 등 다양한 작업을 보다 쉽게 수행할 수 있게 도와줍니다.