Like / Product size selector

수량 선택 기능 구현 중
https://github.com/wecode-bootcamp-korea/26-1st-LIKE-frontend

상세페이지에 사이즈를 선택하는 기능 구현할때 사용한 코드이다. 구현할 때 포인트는 어떻게 수많은 사이즈들 중 하나를 선택하면 해당 사이즈가 활성화되고 이전에 선택되었던 다른 사이즈가 리셋되게 하느냐였다.

Code Review

export class SizeOption extends Component {
  pushSizeAndQuantity = () => {
    const { setMaxQuantity, selectSize, maxQuantity, sizeName } = this.props;
    const available = maxQuantity !== 0;

    if (available) {
      setMaxQuantity(maxQuantity);
      selectSize(sizeName);
    }
  };

  render() {
    const { maxQuantity, sizeName, selectedSize } = this.props;
    const selected = selectedSize === sizeName;
    const available = maxQuantity !== 0;
    
    return (
      <span
        onClick={this.pushSizeAndQuantity}
        className={`SizeOption ${selected && 'selected'} ${
          available && 'activate'
        }`}
      >
        {sizeName}
      </span>
    );
  }
}

Outputs

size, quantity selector

React is declarative

버튼이 다른 버튼을 끌 필요가 없고 그냥 그 버튼만 키게 만들면 된다.

Resource