useRef를 이용하여 외부 클릭시 DropDown 메뉴 사라지게 하기

1. useRef를 이용해서 SearchResult라는 div 엘리먼트에 접근
2. document에 onCheckClickOutside함수를 가진 이벤트리스너를 달아준다.
3. onCheckClickOutside 함수는 DropDown 메뉴가 열렸을때, searchRef에 이벤트가 주어지지 않을 때를 제외하고  전 영역을 클릭시 ​DropDown 메뉴가 닫힌다.

const searchRef = useRef<HTMLDivElement|null>(null);

const onReset = useCallback(
    () => {
      setSearchValue('');
      setOpenDropdown(false);
    },
    [],
  );
  
useEffect(() => {
    const onCheckClickOutside = (e:MouseEvent) => {
      //!searchRef.current.contains(e.target as Node) 은 SearchResult태그에 이벤트가 발생하지 않았을때를 의미
      if (openDropdown === true && searchRef.current && !searchRef.current.contains(e.target as Node)) {
        setOpenDropdown(false); //외부 클릭시 실행할 로직
      }
    };
    document.addEventListener('mousedown', onCheckClickOutside); //컴포넌트 렌더링 후 이벤트 등록
    return () => {
      // Cleanup the event listener
      document.removeEventListener('mousedown', onCheckClickOutside); //컴포넌트가 제거될때 실행
    };
  }, [searchvalue, openDropdown, searchRef.current]);
  
  return (
    <SearchWrapper>
      <Search onPressEnter={onSearchEnter} value={searchvalue} onChange={onChangeSearch} allowClear style={{ width: '20rem' }} placeholder="search" />
      <SearchResult ref={searchRef}>
        <SearchUl>
        </SearchUl>
      </SearchResult>
    </SearchWrapper>
  );