인공지능 웹 서비스 프로젝트 진행 중 (2022-11-14 ~ )

• Header navigation bar 반응형 구현

처음 마주한 문제점 - 사이즈를 늘렸다가 다시 줄이면 isToggle(navbar를 클릭했을 때 true)의 상태 관리가 안됨, click 이벤트를 안하면 상태관리가 안됨.

처음 시도한 navigation bar 상태관리

브라우저 창 사이즈 조절하는 것으로 isToggle 상태관리

const [innerWidth, setInnerWidth] = useState(window.innerWidth);

useEffect(() => {
	const resizeListener = () => {
         innerWidth > 600 ? setIsToggle(false) : setInnerWidth(window.innerWidth);
    };
  
    window.addEventListener('resize', resizeListener);
}, [innerWidth]);
   

구글링을 통해 알게된 또 다른 방법

onBlur 이벤트(focusout과 유사) 활용으로 훨씬 짧고 쉽게 상태관리

onBlur={() => setIsToggle(false)