이벤트 핸들링 & 타임 컨트롤

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 속성?

<nav> 요소와 hidden | HTML/CSSshhn0509.gitbook.io