useRef vs window.addEventListener when onKeyDown in div

1번 ref 로 닫기 기능

    // 메뉴가 열리면 메뉴에 포커스
    const menuRef = useRef(null);

    useEffect(() => {
        if (menuRef.current) {
            menuRef.current.focus();
        }
    }, []);

    return (
        <div
            style={{
                left: 0,
                top: 0,
                backgroundColor: "black",
                display: 'flex',
                flexDirection: 'row',
                opacity: '0.97'
            }}
            className={'w-full h-full fixed z-[99]'}
            tabIndex="0"
            ref={menuRef}
            onKeyDown={(e) => e.key === 'Escape' && setMenuOpen(false)}
        />

 

2번 useEffect로 닫기 기능 

useEffect(() => {
        const handleKeyDown = (event) => {
            if (event.key === 'Escape') {
                setMenuOpen(false);
            }
        };

        window.addEventListener('keydown', handleKeyDown);

        return () => {
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [setMenuOpen]);

 

 

 

보기에도 관리에도 2번이 좋아보인다 (함수가 많아지면)

 

1번은 포커스 관리를 추가적으로 해줘야한다. (사용자가 tab을 누르고 esc를 누르면 작동 안함)

 

 

 

 

 

 

 

2번은 메모리 신경써서 remove해줘야함 

 

 

 

 

 

내선택: 2번