[원티드프리온보딩] 220522

김듑듑·2022년 5월 22일
0

TIL

목록 보기
20/33

쓰는중

  • 상위폴더 A에 있는 A.module.scss에서 className에 대해 어떤 설정을 해놨고
  • A에서 A의 하위폴더 B를 import하고
  • B에서 A.module.scss 내용을 끌어오고 싶을 때
  • 끌어오고 싶은 내용만 따로 이것만.module.scss 따로 빼는게 맞나?

외부 클릭하면 닫히기

any때문에 찝찝하긴 했는데 내가 쌩으로 쓴 이 코드를 수정해주셨다 react-use에 이런것도 있는지 몰랐네...
그럼 오늘은 react-use 정독하는 날로 정해보자
https://github.com/streamich/react-use

🙅import { useEffect, useRef } from 'react'
🙆import { useClickAway } from 'react-use'

const GNB = () => {
	🙅 const gnbRef = useRef<any>(null)
    🙆 const gnbRef = useRef<HTMLButtonElement>(null)
   
...
 
    
 🙅 useEffect(() => {
		function handleClickOutside(e: MouseEvent): void {
		if (gnbRef.current && !gnbRef.current.contains(e.target as Node)) {
		setIsOpen(false)
		}
	}
	document.addEventListener('mousedown', handleClickOutside)
		return () => {
        	document.removeEventListener('mousedown', handleClickOutside)
		}
	}, [gnbRef])
 🙆 useClickAway(gnbRef, handleCloseMenu)
  
...

  return (
 🙅 <button>
		<GnbIcon ref={gnbRef} />
	</button>
 🙆 <button ref={gnbRef}>
		<GnbIcon />
	</button>
  )
}

0개의 댓글