[Next.js] Next.js 14에서 react-select를 사용해보자 (feat. 트러블 슈팅)

이번에 프로젝트를 진행하던중에 next.js 14버전에서 react-select를 쓰려는데 참고할만한 글이 그렇게 많지 않아서 정보도 공유하고 나도 나중에 다시 볼 겸 포스팅을 해본다 !

 

시작은 똑같다.

npm i react-select

해당 명령을 통해 설치하면 기본 셋팅은 끝.

 

"use client";

import React from "react";

import Select from "react-select";

export default function SelectBox() {
  const areaOptions = [
    { value: "전체", label: "전체" },
    { value: "강동구", label: "강동구" },
    { value: "강서구", label: "강서구" },
  ];
  return (
    <Select
      defaultValue={areaOptions[0]}
      isSearchable={true}
      options={areaOptions}
    />
  );
}

나는 Searchable 기능만 사용했던터라 사용하는 옵션값이 적다.

추가적으로 다른 옵션에 대해서 살펴보려면 해당 링크를 통해 찾아보자

 

이렇게만 코드를 기입하면 되는줄 알았는데

이러한 에러가 뜨더라. 너무 당황스러웠다...

찾아봤는데 이러한 에러에 대한 해결 방법이 너무 작았지만 있긴 있었다. 해당 링크를 참고해보자

 

여기까지 적용한 코드는

"use client";

import React, { useId } from "react";
import Select from "react-select";

export default function SelectBox() {
  const areaOptions = [
    { value: "전체", label: "전체" },
    { value: "강동구", label: "강동구" },
    { value: "강서구", label: "강서구" },
  ];
  const id = useId();

  return (
    <Select
      instanceId={id}
      defaultValue={areaOptions[0]}
      isSearchable={true}
      options={areaOptions}
    />
  );
}

다음과 같다.

 

근데 아니 또 에러가 뜬다.

 

왜 나를 이토록 괴롭히는가 ?

해당 에러는 서버 렌더링하는 컨텐츠와 클라이언트 렌더링하는 컨텐츠가 서로 불일치 할때 나는 에러인데

 

이 문제는 아래의 포스팅에서 다뤘으니 해당 포스팅으로 이동해서 해결해보자 !

https://growing-jiwoo.tistory.com/129

[Next.js] Extra attributes from the server : ... 에러 해결

 

React.js에서는 아무렇지 않게 쓰던 라이브러리들이 Next.js를 통해 SSR을 쓰면서부터 

자잘한 에러들이 많이 뜬다.

그럼에도 Next.js는 너무나도 매력적이기 때문에 계속 공부해보도록 하자 ~!