TIL 19 | Drop Down

Drop Down을 구현하려고 찾아보니 대게 어려운 방법이 많았다.. 그래서 찾은 방법 중에서 나에게 제일 알맞는 방법으로 구현해냈다.

State, className 통한 구현 방법

• state 값으로 boolean(false)를 지정
• 함수를 만들어서 button 클릭 시 state boolean 값이 true ↔ false 변경되도록 작성
• onClick시 해당 함수가 작동되도록 작성
• state 값에 따라 드롭다운될 list의 className이 변경되도록 작성

constructor() {
    super();
    this.state = {
      isProductListOn: false,
    };
  }

toggleProductList = () => {
    this.setState({
      isProductListOn: !this.state.isProductListOn,
    });
  };

<button 
	className="productListButton"
	onClick={this.toggleProductList}>
Product +
</button>

<ul className={isProductListOn ? 'productList on' : 'productList off'}>