React 배송비 탭 드롭다운

구현 코드

 shippingButtonClick = event => {
    const { buttonValue } = this.state;
    this.setState({
      buttonValue: buttonValue === true ? false : true,
    });
  };

.
.
.
.



<div className="shippingFeeBox">
              <div className="shippingFee">배송비</div>
              <div className="shippingListsBox">
                <ul className="shippingFeeLists">
                  개당 {productInfo.shippingFee}원
                </ul>
                <li
                  className={
                    buttonValue === true ? 'shippingFeeNone' : 'shippingLists'
                  }
                >
                  <div className="typeBox">
                    <p className="shippingType">배송 타입</p>
                    <p className="shippingTypeValue">
                      {productInfo.shippingTypeValue}
                    </p>
                  </div>
                  <div className="typeBox">
                    <p className="payType">결제 방식</p>
                    <p className="payTypeValue">{productInfo.payTypeValue}</p>
                  </div>
                </li>
              </div>
              <bitton
                className="shippingFeeButton"
                onClick={this.shippingButtonClick}
              >
                ∨
              </bitton>

코드 동작 원리

1. 먼저 mock 데이터를 불러와 배송타입과 결제방식 항목에 값을 넣어준다
2. 배송비 탭 우측 버튼에 onClick 이벤트를 선언한다
3. 배송비 하단 드롭다운 영역을 display:none 이 적용된 className 과 기존의 css가 적용되어 있는 className 을 두가지 생성한다
4. onClick 이벤트에서 className을 true false값으로 관리 하기 위해 초기값이 true인 status를 선언한다
5. 클릭이 발생할때마다 true일땐 false로 false일댄 true 로 변경이 가능 하도록 status값을 바꾸는 조건식을 setState를 통해 관리한다

결과물