[리액트/React] input버튼을 눌리면 placeholder가 사라지는 효과 구현하기

1. 문제 발견

프로젝트 베타 서비스 개발 중 캐치하지 못했던 점을 팀원이 대신 캐치해줬다.

"구글을 보면 .. 검색창에 마우스를 클릭할 때 위에 있던 안내 문구가 사라지던데, 구현할 수 있을까요?"

기존엔 이렇게 되어있다가 ..

검색창을 클릭하면 placeholder가 사라진다.

매우 간단하게 useState Hook, onBlur, onFocus를 활용하여 구현했다.

2. 완성된 코드

import { useState } from "react";

function InputExample() {
	// false = input이 클릭되어 있지 않을 때, true = input이 클릭되어 있을 때
	const [isInputClicked, setIsInputClicked] = useState(false);
	return (
		<div className="bg">
			<input
				// 클릭될 때 작동
				onFocus={() => {
					setIsInputClicked(true);
				}}
				// 클릭되어 있지 않을 때 작동(input 이외의 영역이 클릭되었을 때)
				onBlur={() => {
					setIsInputClicked(false);
				}}
				placeholder={isInputClicked === true ? "" : "질문을 입력해주세요."}
			/>
		</div>
	);
}

export default InputExample;

3. 간단한 해석

onFocus이벤트는 요소가 포커스되었을 때 발생하는 이벤트이다. 반대로 onBlur이벤트는 포커스가 해제되었을 때 발생한다.

onFocus이벤트가 input에 발생하였을 때 isInputClicked의 값을 true로, onBlur이벤트가 input에 발생하였을 때는 isInputClicked의 값을 false로 변환하는 useState Hook을 사용하였다.

Input의 placeholder엔 삼항연산자를 사용하여 isInputClicked의 값이 true일 땐 출력되어지지 않으며 false일 땐 "질문을 입력해주세요."라는 값을 출력한다!

끝!