이벤트 핸들링 & 타임 컨트롤
1. 이벤트 핸들링
1.1 상태가 필요한 요소
상태가 필요한 요소는 클래스 이름을 추가 제거하는 기능이 필요하다. 이를 상태를 통해서 제어해보자.
1.1.1 하고자하는 것
네비게이션 버튼을 클릭 했을 때,
hidden
속성과,.is-active
클래스 이름이 추가/제거 되었으면 좋겠다.
1.1.2 구성
hidden 속성을 boolesn 값을 설정하는 상태, class 이름을 설정하는 상태 설정
열림/ 닫힘 버튼을 클릭시 상태가 업데이트 되도록 업데이트 함수 설정
해당 버튼에 업데이트 함수 바인딩 (이벤트 바인딩)
import './AppNavigation.scss'
import React from 'react'
class AppNavigation extends React.Component {
constructor(props) {
super(props)
this.state = {
// hidden 속성을 제어하는 상태
isOpen: false,
// is-active를 추가 제거할 수 있도록 className 상태 설정
navClassName: 'appNavigation',
}
}
handleOpenNav = () => {
this.setState({
isOpen: true,
navClassName: 'appNavigation is-active'
})
}
handleCloseNav = () => {
this.setState({
isOpen: false,
navClassName: 'appNavigation',
})
}
render() {
return (
<>
<button
onClick={this.handleOpenNav}
className="resetButton is-open-menu"
type="button"
title="메뉴 열기"
aria-label="메뉴 열기"
>
<span className="ir"></span>
</button>
<nav className={this.state.navClassName} hidden={!this.state.isOpen}>
<h2 className="a11yHidden">메인 메뉴</h2>
<ul className="resetList">
{ ** }
</ul>
<button
onClick={this.handleCloseNav}
className="resetButton is-close-menu"
type="button"
title="메뉴 닫기"
aria-label="메뉴 닫기"
>
<span className="close" aria-hidden="true">
×
</span>
</button>
</nav>
</>
)
}
}
export default AppNavigation
2. 타임 컨트롤
2.1 문제
네비게이션이 열고 닫힐 때 hidden 속성이 className과 같이 추가/제거 되어서 설정된 애니메이션이 적용 안된다.
2.2 해결
각 속성에 시간차를 주어 애니메이션이 실행 된 다음 hidden 속성이 적용되도록 한다.
handleOpenNav = () => {
this.setState(
{
isOpen: true,
},
() => {
window.setTimeout(() => {
this.setState({ navClassName: 'appNavigation is-active' })
}, 400)
}
)
}
handleCloseNav = () => {
this.setState(
{
navClassName: 'appNavigation',
},
() => {
window.setTimeout(() => {
this.setState({ isOpen: false })
}, 400)
}
)
}
3. <nav>요소에 hidden 속성?
Last updated
Was this helpful?