esc 를 눌렀을 경우 동작

Question

안녕하세요 혹시 상세 페이지에 들어갔을 경우 esc를 누르면 ImagesZoom 컴포넌트를 끄게 하고 싶다면 어떻게 할 수 있을까요? onKeyDown을 이용하여 로직을 짜보았는데 동작을 하지않습니다.. import React , { useState , useCallback } from " react "; import PropTypes from " prop-types "; import Slick from " react-slick "; import { Global , Overlay , Header , SlickWrapper , Indicator , ImageWrapper , CloseBtn , } from " ./styles "; const Imageszoom = ({ images , onClose }) => { // 현재 슬라이드 위치를 표시하기 위한 state const [ currentSlide , setCurrentSlide ] = useState ( 0 ) ; const handleKeyPress = useCallback ( ( e ) => { if ( e . key == 27 ) { onClose () ; } }, []) ; return ( < Overlay > < Global /> < Header > < h1 > 상세 이미지 < CloseBtn onClick ={ onClose } onKeyDown ={ handleKeyPress } /> < SlickWrapper > < Slick initialSlide ={ 0 } beforeChange ={( slide ) => setCurrentSlide (slide) } infinite arrows ={ false } slidesToShow ={ 1 } slidesToScroll ={ 1 } > { images . map ( ( v ) => ( < ImageWrapper key ={ v . src } > < img src ={ v . src } alt ={ v . src } /> )) } < Indicator > < span > { currentSlide + 1 } / { images . length } ) ; }; Imageszoom . propTypes = { images : PropTypes . arrayOf (PropTypes . object . isRequired) , onClose : PropTypes . func . isRequired , }; export default Imageszoom ;

한수빈 · Answer

useEffect( () => { const handleKeyPress = e => e.keyCode == 27 && onClose(); window.addEventListener('keyup', handleKeyPress); return () => { window.removeEventListener('keyup', handleKeyPress); }; }, [] );

제로초(조현영) · Answer

handleKeyPress를 Overlay에 달아보세요.