외부 영역 클릭 시 닫기

pre-project 기간입니다!

구현하다가 유용할거 같아서 체크!

현재 헤더 서치바를 구현하는데 누르면 밑에 내가 작성해둔 컴포넌트를 보여주어
드롭다운처럼 보이게끔 구현을 해놨습니다.

일단 useState를 이용해서 클릭시 열고 닫고만 해놨다가 실제 홈페이지에서 외부영역시에만 닫히는 것을 구현하기 위해 useRef를 사용해봤습니다.

✨ 코드를 살펴봅니다!

function Header() {
  const [open, setOpen] = useState(false);
  const searchRef = useRef(null);

설명컴포넌트의 상태를 관리해주는 것 과 ref를 변수로 하나 만들어둡니다.

useEffect(() => {
  function handleOutside(e) {
    if (searchRef.current && !searchRef.current.contains(e.target)) {
      setOpen(false);
    }
  }
  document.addEventListener('mousedown', handleOutside);
  return () => {
    document.removeEventListener('mousedown', handleOutside);
  };
}, [searchRef]);

const click = () => {
  setOpen(true);
};

useEffect 함수를 이용해서 설정영역 밖을 클릭하면 setOpen(false)를 주어 상태값을 변경시켜
컴포넌트를 안보이게끔 할 것이다.

    
        <div ref={searchRef} className="headerMiddle">
          <div className="headerSearchContainer">
            <input
              onFocus={() => {
                setInputFocus(true);
              }}
              onClick={click}
              type="text"
              placeholder="Search..."
            />
          </div>
          {open ? <InputBox /> : null}
        </div>

ref={searchRef}로 영역지정을 줌으로써 서치바를 누를땐 닫히지 않지만..
외부영역을 클릭하면 닫히게 됩니다!

🎈화 면