Search 아이콘 클릭 시 Search Bar로 변경

Search 아이콘 클릭 전

Search 아이콘 클릭 후 & X 버튼 클릭 전

X 버튼 클릭 후

내용 정리

Search 아이콘을 클릭 할 때 만들어 둔 Input box를 opacity: 0에서 1로 변경 및 visibility: hidden을 visible로 변경하려고 한다.

const [isSearchOpen, setIsSearchOpen] = useState(false);

먼저 useState를 사용한다

const handleSearchOpen = () => {
	setIsSearchOpen(!isSearchOpen);
};

handleSearchOpen 함수를 사용하여 setIsSearchOpen에서 isSearchOpen이 아닌 상태를 !를 이용해 만들어준다
(!는 ‘~이 아닐때’를 의미한다)

className=`{searchContainer ${isSearchOpen ? ‘active’ : ‘’}`

백틱(``)을 이용하여 className 안에 함수를 사용할 수 있는 상태를 만들어준다.
백틱 사용 후 중괄호를 사용해 함수를 사용한다.
${}안에 isSearchOpen을 사용해 결과가 True(?)이면 active 거짓이면 ‘’으로 나타나도록 한다.

<div className=‘searchIcon’ onClick={handleSearchOpen}>

onClick 함수를 이용해 handleSearchOpen을 사용한다(searchIcon을 클릭 시 Input창이 나온다)

<div className=‘searchClose’ onClick={handleSearchOpen}>

searchIcon을 클릭하면 아이콘이 사라지기 때문에 창을 닫기 위해 X 버튼을 활용했다.
onClick을 이용해 버튼 클릭 시 handleSearchOpen이 동작해 X버튼을 클릭 시 Opacity와 visibility가 다시 원래대로 돌아가도록 했다.

.searchContainer {
    opacity: 0;
    visibility: hidden;

	&.active {
      opacity: 1;
      visibility: visible;
	}
}