들어가며
웹 애플리케이션에서 헤더는 사용자가 가장 먼저 접하는 중요한 인터페이스 요소 중 하나입니다. 쿠팡이츠의 헤더 컴포넌트는 로고 클릭을 통한 홈페이지 접근, 계정 관리 기능, 그리고 로그인 상태 확인을 통한 다양한 사용자 역할에 따른 인터페이스 제공 등, 사용자 경험을 향상시키는 다양한 기능을 포함하고 있습니다. 이번 기술 블로그에서는 헤더 컴포넌트의 코드를 자세히 분석하며, 특히 useMe라는 GraphQL 기반의 사용자 인증 훅을 소개하고자 합니다.
헤더 컴포넌트의 구조
헤더 컴포넌트는 크게 두 부분으로 구성됩니다. 로고 이미지와 계정 관리 아이콘. 로고는 사용자가 언제든지 홈페이지로 쉽게 돌아갈 수 있도록 Link 컴포넌트로 감싸져 있습니다. 계정 관리 아이콘은 사용자의 로그인 상태와 역할에 따라 다른 기능을 제공합니다.
로고 이미지
로고 이미지는 img 태그를 사용하여 구현되며, Link 컴포넌트로 홈으로의 경로가 설정되어 있습니다. 이는 사용자가 언제든지 클릭 한 번으로 홈페이지로 돌아갈 수 있는 편리함을 제공합니다.
<Link to="/">
<img src={coupangEatsLogo} className="w-64 h-auto" alt="Coupang Eats" />
</Link>계정 관리 아이콘
FontAwesomeIcon 컴포넌트를 사용하여 구현된 계정 관리 아이콘은 로그인된 사용자의 역할이 고객일 경우 주문 내역 페이지로, 그 외의 경우 프로필 편집 페이지로 연결됩니다. 이는 조건부 렌더링을 통해 구현되며, 사용자의 역할에 따라 적절한 링크를 제공합니다.
<span className="text-xs">
{data?.me.role === UserRole.Client ? (
<Link to="/order-history">
<FontAwesomeIcon icon={faUser} className="text-3xl" />
</Link>
) : (
<Link to="/edit-profile">
<FontAwesomeIcon icon={faUser} className="text-3xl" />
</Link>
)}
</span>useMe Hook
useMe 훅은 GraphQL을 사용해 로그인된 사용자의 정보를 서버에서 조회하는 기능을 제공합니다. 이 훅은 Apollo Client의 useQuery 함수를 활용하여 ME_QUERY라는 GraphQL 쿼리를 실행합니다. 이 쿼리는 사용자의 ID, 이메일, 역할, 인증 상태 등의 데이터를 반환합니다.
export const ME_QUERY = gql`
query me {
me {
id
email
role
verified
}
}
`;
export const useMe = () => {
return useQuery<MeQuery>(ME_QUERY);
};이 훅의 주된 장점은 여러 컴포넌트에서 사용자 데이터를 쉽게 접근할 수 있게 하고, 재사용성을 높여준다는 것입니다. 또한, Apollo Client를 사용함으로써 데이터를 브라우저의 메모리에 캐시하여 필요할 때마다 GraphQL 서버에 새로운 요청을 보내지 않고도 데이터를 불러올 수 있습니다. 실제로 여러 컴포넌트에서 useMe()를 호출해도 네트워크 탭에서 확인해보면 GraphQL 쿼리가 최초에만 호출되었음을 알 수 있습니다.
이러한 특성은 특히 대규모 애플리케이션에서 데이터 관리의 일관성을 유지하고, 리소스 사용을 최적화하는 데 유용합니다.
마치며
쿠팡이츠의 헤더 컴포넌트는 사용자가 애플리케이션을 이용하면서 필요한 주요 기능들을 손쉽게 이용할 수 있도록 돕습니다. 로고와 계정 관리 아이콘을 통해 사용자 경험을 간소화하며, useMe 훅을 통한 사용자 데이터 관리는 효율적이고 안정적인 사용자 인터페이스 구축에 기여합니다.
