React ClientOnly 컴포넌트 만들기 (feat. useMount)

📌 목차

• 서론
• ClientOnly 컴포넌트는 뭘까?
• Next 공식 문서에 나와 있는 ClientOnly 컴포넌트
• Next 공식 문서에 나와 있는 ClientOnly 컴포넌트의 문제점
• Nuxt 같은 ClientOnly 만들기
• 코드 자세하게 뜯어보기
• 결론

 

📌 서론

 

SSR을 사용하면 필연적으로 ClientOnly 컴포넌트를 사용해야 하는 순간이 있어요. Browser에서만 있는 정보로 rendering을 해야 하거나 의도적으로 서버에서 그려지지 않게 하는 순간 말이에요. 특히 저는 A, B 테스팅을 할 때 ClientOnly의 도움을 많이 받고 있어요. 구글 에널릭틱스의 A, B 테스팅에서 돔을 조작하게 되는데 이때 ClientOnly의 기능이 없다면 서버에서 내려주는 Dom과 Hydration 이후의 돔이 달라지게 되어 hydration fail 에러를 만나게 되거든요.

 

Nuxt에서는 ClientOnly 컴포넌트를 자체 제공을 해주고 있지만 Next에서는 대략 적인 구현 방법을 공식 문서에만 나와있어요.  그러나 문서에 나와 있는 ClientOnly는 기능이 조금 부족합니다. 다음 글에서는 이 문제를 어떻게 극복을 했는지를 기술합니다.

 

📌 ClientOnly 컴포넌트는 뭘까?

 

직접적인 구현에 앞서 ClientOnly 컴포넌트가 하는 일에 대해 간략하게 설명해볼게요. 

 

Next에서의 기본적인 동작 구조는 다음과 같아요.

Request -> Next Server -> Static HTML -> Client -> HTML에 script 코드 삽입 (hydration)

먼저 사용자가 Next Server에 페이지 요청을 보냅니다. 그럼 Next Server에서는 요청에 맞는 페이지를 만들게 됩니다. 

 

📌 Next 공식 문서에 나와 있는 ClientOnly 컴포넌트

 

Next 공식 문서에 나와 있는 ClientOnly 컴포넌트는 이렇게 구현이 되어있어요.

 

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

export default function ClientOnly({ children }) {
  const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
  	setIsMounted(true)
  }, [])
  
  if (isMounted) return <>{children}</>
  else return <></>
}

정말 간단하게 구현을 할 수 있죠? 근데 이 컴포넌트의 문제점에 대해 살펴볼게요.

 

📌 Next 공식 문서에 나와 있는 ClientOnly 컴포넌트의 문제점

 

먼저 공식 문서에 나와 있는 ClientOnly 컴포넌트의 문제점을 살펴보기 전에 우리가 왜 SSR을 사용하는지 짚고 넘어갈 필요가 있어요.

 

우리는 도대체 왜 SSR을 사용할까요? 아마 정말 많은 이유가 있을텐데, 그중 하나는 바로 검색 엔진 최적화를 하기 위해서 입니다. 검색 엔진 최적화를 위해 우리는 크롤러 봇에게 해당 페이지가 어떤 내용이 들어가 있는지 최대한 많은 정보를 알려줄 필요가 있어요. 근데 ClientOnly 부분은 생략이 될 거예요. (물론 요즘 구글 크롤러 봇은 일반적인 CSR의 정보도 긁어간다지만 다른 검색 사이트에서는 그 정도까지는 지원하지 않아요. 😭😭😭)

 

그렇다면 이 문제를 어떻게 해결할 수 있을까요? 바로 설명 콘텐츠를 넣어주는 거예요. 

 

📌 Nuxt 같은 ClientOnly 만들기

우리는 앞서 Next 공식 문서에 나와있는 ClientOnly의 문제점을 살펴보았습니다. 그렇다면 이 문제는 어떻게 해결을 할 수 있을까요? 답은 Nuxt.js 에서 제공하는 ClientOnly의 interface에 있습니다.

 

interface ClientOnly {
  fallback: string
  fallbackTag?: 'div' | string 
}

 

네, Nuxt는 ServerSide에서 그려질 컴포넌트의 설명을 첨부할 수 있어요. 그래서 이렇게 사용이 가능합니다.

 

// ServerSide에서는 <div>hello</div> 만 랜더링 함.
// ClientSide에서 왔을때 비로소 <div>hello world</div>를 랜더링.
<ClientOnly fallback='hello'>
  <div>hello world</div>
</ClientOnly>

근데 저는 여기서 좀 더 확장을 하고 싶어요. 

1. 리액트 컴포넌트도 fallback으로 받을 수 있음 -> 조금 더 리액트 스러운 느낌
2. fallback에서 attribute를 지정할 수 있음(ex> aria-label="hello") -> SEO를 강화를 위해

이제 해결책도 알았으니 우리도 react 코드로 만들어 볼까요? 전체 코드는 다음과 같아요.

 

import React, { ReactElement, PropsWithChildren, useMemo, useEffect, useState } from 'react'

const useMount = (): boolean => {
  const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
    setIsMounted(true)
  }, [])
  return isMounted
}

const isString = (target: unknown): target is string => typeof target === 'string'

interface FallBackProps {
  fallbackTag?: keyof JSX.IntrinsicElements | 'div'
  fallback?: string | ReactElement
}

function FallBack({ fallback, fallbackTag = 'div', ...delegates }: FallBackProps): ReactElement {
  const FallBackTag = useMemo(() => `${fallbackTag}`, [fallbackTag]) as keyof JSX.IntrinsicElements
  if (fallback) {
    if (isString(fallback)) return <FallBackTag {...delegates}>{fallback}</FallBackTag>
    else return <>{fallback}</>
  }
  return <></>
}

export default function ClientOnly({ children, fallbackTag, fallback, ...delegates }: PropsWithChildren<FallBackProps>): ReactElement {
  const isMounted = useMount()
  if (isMounted) return <>{children}</>
  return <FallBack fallback={fallback} fallbackTag={fallbackTag} {...delegates} />
}

 

이렇게 구현이 가능합니다. 그럼 이제 ClientOnly를 사용하는쪽에서는 다음과 같이 편하게 사용이 가능할 거예요.

 

// 💡 1번 케이스) fallback을 string으로 사용하는 경우:
// ServerSide: <div>hello world</div>
// ClientSide: <div>hello</div>
function Test() {
	return (
	<ClientOnly fallback={'hello world'}>
        	<div>hello</div>
        </ClientOnly>
	)
}

// 💡 2번 케이스) fallbackTag를 사용하는 경우
// ServerSide: <h1>hello world</h1>
// ClientSide: <div>hello</div>
function Test() {
	return (
	<ClientOnly fallback={'hello world'} fallbackTag='h1'>
        	<div>hello</div>
        </ClientOnly>
	)
}

// 💡 3번케이스) Component를 사용하는 경우
// ServerSide: <h1>hello world</h1>
// ClientSide: <div>hello</div>
function TestServer() {
	return <h1>hello world</h1>
}
function Test() {
	return (
	<ClientOnly fallback={<TestServer />}>
        	<div>hello</div>
        </ClientOnly>
	)
}

 

그럼 이제 위 코드를 자세하게 뜯어볼게요.

 

📌 코드 자세하게 뜯어보기

먼저 Fallback 컴포넌트를 살펴볼게요.

import React, { ReactElement, PropsWithChildren, useMemo } from 'react'

const isString = (target: unknown): target is string => typeof target === 'string'

interface FallBackProps {
  fallbackTag?: keyof JSX.IntrinsicElements | 'div'
  fallback?: string | ReactElement
}

// ⭐️ delegates는 앞서 말한 attributes를 생성하기 위함입니다.
// ex> <FallBack fallback='hello' aria-label='hello' />
// -> <div aria-label='hello'>hello</div>
function FallBack({ fallback, fallbackTag = 'div', ...delegates }: FallBackProps): ReactElement {
  // ⭐️ Tag를 동적으로 생성을 해줍니다.
  // props.fallbackTag 가 'h1'으로 들어왔다면 h1태그를 만들어줘요.
  const FallBackTag = useMemo(() => `${fallbackTag}`, [fallbackTag]) as keyof JSX.IntrinsicElements
  
  if (fallback) {
    // ⭐️ fallback은 두가지 타입(string, ReactElement)이 있어서 분기처리 모습입니다.
    if (isString(fallback)) return <FallBackTag {...delegates}>{fallback}</FallBackTag>
    else return <>{fallback}</>
  }
  return <></>
}

 

그럼 이제 마지막으로 ClientOnly 코드를 살펴보겠습니다.

 

// ⭐️ useMount는 isMounted를 반환하는 코드로 짜여있어요. 
// hydration이 일어나면 true로 변경이 됩니다.
// hydration이 일어났다는 말은 client-side라는 것을 알 수 있습니다.
const useMount = (): boolean => {
  const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
    setIsMounted(true)
  }, [])
  return isMounted
}

// ⭐️ ClientOnly 컴포넌트는 단순하게 isMounted의 여부를 놓고 어떻게 랜더링할 지 결정합니다.
// server side 라면 Fallback 컴포넌트를 랜더링
// client side 라면 children을 랜더링
export default function ClientOnly({ children, fallbackTag, fallback, ...delegates }: PropsWithChildren<FallBackProps>): ReactElement {
  const isMounted = useMount()
  if (isMounted) return <>{children}</>
  return <FallBack fallback={fallback} fallbackTag={fallbackTag} {...delegates} />
}

📌 결론

이렇게 ClienyOnly를 사용해서 Hydration error를 피할 수 있었습니다. 사실 use-mount 패키지의 배포 내용 중 하나입니다. 조금 더 많은 기능을 사용하고 싶으시다면 @react-useful-hooks/use-mount 를 애용해 주세요. (⭐️는 사랑입니다!)

 

그리고 혹시 react-hooks관련 오픈소스에 관심이 있으시다면 저희 ReactUsefulHooks에 놀러 와 주세요. 앞으로 더 많은 유용한 react-hooks를 제공할 예정이라 함께하고 싶으시다면 언제든 환영입니다! 🙇🏻‍♂️