[ React ] input 태그의 placeholder로 icon 사용하기

검색 가능한 SelectBox를 구현하며 돋보기 아이콘을 placeholder로 적용해 기본 SelectBox와 차이를 두려고 했다. 다만 input 요소의 placeholder 속성에는 직접적으로 아이콘을 표시할 수는 없기 때문에 다른 방법을 사용해야 한다.

 

 

 

1. 아이콘 넣기

input 태그와 동일한 상위 요소의 하위에 원하는 icon 태그를 넣고 absolute 속성을 활용해 자리를 적절히 배치해준다.

<MdSearch className="search-icon" />

.search-icon {
  position: absolute;
  left: 1rem;
  pointer-events: none;
  font-size: 1.2rem;
}

 

 

 

2. 아이콘 표시 상태 변수 추가

display 속성을 활용해 아이콘을 표시하거나 숨겨준다.

이때 addEventListener 대신 아이콘 표시 상태를 의미하는 변수인 isIcon 을 새롭게 선언하고 styled components의 props로 보내 스타일링에 사용했다.

<SearchIcon $isIcon={isIcon} />

export const SearchIcon = styled(MdSearch)<{ $isIcon: boolean }>`
  position: absolute;
  left: 1rem;
  pointer-events: none;
  font-size: 1.2rem;

  display: ${({ $isIcon }) => ($isIcon ? "block" : "none")};
`;

 

 

 

3. 최초 렌더링 시 placeholder 표시 여부

입력 값이 없을 때만 placeholder를 표시해야 한다.

// 최초 렌더링 시 item 값 존재 여부에 따라 placeholder 표시
useEffect(() => {
  if (!item) setIsIcon(true);
  else setIsIcon(false);
}, []);

 

 

 

4. Focus 시 아이콘 보이지 않게 하기

selectBox를 누르면 실행되는 inputFocus에 아이콘을 숨기는 코드를 넣어줬다.

const inputFocus = () => {
  document.getElementById("search-input")?.focus();
  setIsIcon(false);
};

 

 

 

5. 사용자 입력 종료 후 placeholder가 다시 필요한 경우

최초 렌더링 이후 사용자가 selectBox를 사용했음에도 선택된 값이 없는 경우에는 다시 placeholder를 표시해줘야 한다.

selectBox가 focus를 잃었을 때 실행하는 handleBlur 함수에 아이콘 표시 여부에 대한 코드를 추가해줬다.

이때 조건문에 props로 받은 item 변수를 그대로 사용하면 함수가 이전 값을 기억하여(클로저) 원하는 대로 동작하지 않았다. 그래서 useRef로 최신 변수를 재정의해 조건문에 활용했다.

const handleBlur = () => {
  setKeyword(selectedItem.current);
  if (!selectedItem.current) setIsIcon(true);
  else setIsIcon(false);
};