react-select를 사용 중인데 플레이스홀더가 표시되지 않습니다.
프로젝트에서 react-select 라이브러리를 사용하고 플레이스홀더 텍스트가 나타나지 않는 문제에 고민하고 있다면 걱정하지 마세요. 이 문제는 혼란스럽고 짜증나는 경우일 수 있지만 걱정하지 마세요, 저희가 도움을 드리겠습니다.
문제점
react-select을 사용할 때, 선택이 이루어질 때까지 플레이스홀더 텍스트가 입력 필드에 표시되어야 합니다. 제공된 코드 sandbox 예시에서 플레이스홀더 텍스트는 “Search Country…”로 설정되었지만, 원하는 대로 나타나지 않습니다.
해결책
코드를 분석한 후 문제의 근본 원인을 발견했습니다. 문제는 value 프롭에 react-select 컴포넌트에 전달되는 방식에 있습니다.
export default function Countries({ formValues, setFormValues }) {
// ...
function handleChange(item) {
setSearch(item);
}
// ...
return (
<>
</>
);
}
보시다시피, value 프롭은 “search.country” 객체가 전달되고 있으며, 이는 잘못된 방식입니다. 플레이스홀더는 value 프롭에 falsy한 값을 (빈 문자열 또는 undefined) 전달하는 경우에만 표시됩니다.
이를 해결하기 위해 value 프롭을 “search” 대신에 “search.country”로 변경해야 합니다. 이렇게 하면, search 객체의 country 속성을 명확하게 value 프롭에 전달하게 됩니다.
<select>
</select>이 작은 변경을 하면, 플레이스홀더 텍스트가 원래대로 표시될 것입니다.
결론
이 문제 해결 가이드에서는 react-select에서 플레이스홀더 텍스트가 표시되지 않는 문제를 다루었습니다. value 프롭을 올바르게 react-select 컴포넌트에 전달함으로써 이 문제를 해결할 수 있었습니다. 앞으로 비슷한 문제를 만나더라도 이 해결책을 기억하세요.
즐거운 코딩하세요!
참고 자료 :
https://stackoverflow.com/questions/66867501/using-react-select-but-placeholder-is-not-showing
같은 카테고리의 다른 글 보기 :
