다람쥐 헌 쳇바퀴에 타고파

Next.js14 + VE warning 이슈

2024년 01월 05일
Next.js
notion image
Next.js 14의 app router 내에서 VE @vanilla-extract/dynamic 패키지의 assignInlineVars 를 사용해보니 콘솔에 위와 같은 오류가 발생하고 있었다.
 
구글링을 해본 결과 아래와 같은 해결 방법들을 찾을 수 있었다.

문제 해결법

1. use client 추가하기

'use client'; // 🙆🏻‍♂️ solution!

export function Tag({ label, bgColor }: TagProps) {
  return (
    <span
      className={classNames([TagClassName])}
      // 🐛 warning in here!
      style={assignInlineVars({
        [TagFontColorVariants]: bgColor ? getFontColor(bgColor) : "black",
        [TagBgColorVariants]: bgColor,
      })}
    >
      {label}
    </span>
  );
}
오류가 발생하는 코드 부분에 단순히 ‘use client’ 를 추가하여 해결을 할 수 있었다.
 

2. JSON 메소드 활용하기

export function Tag({ label, bgColor }: TagProps) {
  return (
    <span
      className={classNames([TagClassName])}
      // 🙆🏻‍♂️ solution!
      style={JSON.parse(
        JSON.stringify(
          assignInlineVars({
            [TagFontColorVariants]: bgColor ? getFontColor(bgColor) : "black",
            [TagBgColorVariants]: bgColor,
          }),
        ),
      )}
    >
      {label}
    </span>
  );
}
assignInlineVars() 를 단순히 JSON.parse(JSON.stringify(…)) 로 래핑하여 사용하면 문제가 발생하지 않았다.
 

그래서 왜?

문제 해결 방법만 알고 넘어가는 것은 재미 없으니, use client 를 사용하는 것과 JSON 메소드를 활용하는 것이 왜 문제 해결책인지를 짐작해보자.
Next.js에서는 서버와 클라이언트 사이에 값을 전달하기 위해서 다소 특별한 방법을 사용한다.
notion image
notion image
Next.js를 통해 개발된 페이지를 개발자 도구 등으로 열어보면 다음과 같은 내용을 본적이 있을 것이다.
이 값들은 Next.js에서 클라이언트와 서버간의 데이터를 전송하는데에 사용하는 특별한 전역 변수이다.
 
이 때 내부적으로 JSON을 사용해 값을 공유하는데, JSON은 함수 등을 stringify 할 수 없다.
const obj = {
  id: 1,
  name: "im-ian",
  func: function () {
    return this;
  },
};

JSON.stringify(obj); // {"id":1,"name":"im-ian"}
때문에 서버와 클라이언트간 데이터를 주고 받을 때 JSON으로 변환되면서 일어날 수 있는 프로그래밍적 이슈를 예방하기 위해서 plain object를 사용해야한다는 경고가 발생하는 것 같다.
또한 ‘use client’를 사용하면 서버와 클라이언트 간 데이터 교환이 이루어지지 않아 경고가 발생하지 않는다.