React 옵션 선택창 구현

구현 내용

제품 선택창을 클릭해서 이름과 가격을 선택하고 색상 선택창을 클릭해서 색상을 선택 할 수 있다.

동작 원리

---

1. 제품 선택창을 클릭하면 제품의 옵션을 보여주는 창이 드롭다운 된다.
2. 옵션 중 하나를 선택하면 클릭한 옵션의 제품명과 가격이 수량박스에 저장된다. 또한 드롭다운 박스가 닫히고 색상 선택창의 옵션들이 드롭다운 된다.
3. 옵션 중 하나를 선택하면 클릭한 옵션의 색상이 수량 박스에 저장된다.

1. 제품 선택창을 클릭하면 제품의 옵션을 보여주는 창이 드롭다운 된다.

구현 코드

 productOptionDropdown = () => {
    const { productOptionDropdown } = this.state;
    this.setState({
      productOptionDropdown: !productOptionDropdown === true,
    });
  };

  productOptionSelect = option => {
    const { productOptionDropdown, colorOptionDropdown } = this.state;
    this.setState({
      productOptionDropdown: !productOptionDropdown === true,
      productPrice: option.price,
      productName: option.name,
      productId: option.id,
      colorOptionDropdown: !colorOptionDropdown === true,
    });
  };

.
.
.


<p>옵션 선택</p>
              <div
                onClick={this.productOptionDropdown}
                className={
                  productOptionDropdown === true
                    ? 'optionDropdownOffRadius'
                    : 'optionDropdownOnRadius'
                }
              >
                {productName}
              </div>
              <div
                className={
                  productOptionDropdown === true
                    ? 'optionDropdownOff'
                    : 'optionDropdownOn'
                }
              >
                {productInfo.product &&
                  productInfo.product.map((option, index) => {
                    return (
                      <div
                        key={index}
                        className="selectBox"
                        onClick={() => this.productOptionSelect(option)}
                      >
                        <div className="textFlex">
                          <div>{index + 1}.</div>
                          <div>{option.name}</div>
                        </div>
                        <div className="optionPrice">
                          {priceComma(option.price)}원~
                        </div>
                      </div>
                    );
                  })}
              </div>

1. 제품 선택창을 클릭했을 때 className을 state값을 통해 바꿔서 아래쪽 radius가 변경되어 열리는 느낌을 준다. 또한 드롭다운이 되도록 display:none 속성의 옵션 선택창을 나타나게 한다.

2. map을 돌려서 나온 옵션 을 클릭할 때 onClick 함수의 인자로 map의 인자 option을 넘겨줌으로서 클릭한 요소에 대해서만 데이터에 접근할 수 있다.
   접근 한 객체의 키값을 통해 접근해서 제품의 이름과 가격을 state값에 저장한다.

3. 옵션을 선택했을때 className을 state값을 통해 바꿔서 제품 선택 드롭다운은 닫히고 색상옵션이 바로 연계돼서 열릴 수 있게 해준다

2. 옵션 중 하나를 선택하면 클릭한 옵션의 제품명과 가격이 수량박스에 저장된다. 또한 드롭다운 박스가 닫히고 색상 선택창의 옵션들이 드롭다운 된다.

구현 코드

 colorOptionSelect = colorOption => {
    const { colorOptionDropdown, productPrice } = this.state;
    this.setState({
      colorOptionDropdown: !colorOptionDropdown === true,
      productColor: colorOption.name,
      productQuantity: 1,
      quantityPrice: productPrice,
      quantityBox: false,
      colorId: colorOption.id,
    });
  };

.
.
.


	   <div
                className={
                  colorOptionDropdown === true
                    ? 'colorDropdownOffRadius'
                    : 'colorDropdownOnRadius'
                }
              >
                {productColor}
              </div>
              <div
                className={
                  colorOptionDropdown === true
                    ? 'colorOptionDropdownOff'
                    : 'colorOptionDropdownOn'
                }
              >
                {productInfo.color &&
                  productInfo.color.map((colorOption, index) => {
                    return (
                      <div
                        key={index}
                        className="colorSelectBox"
                        onClick={() => this.colorOptionSelect(colorOption)}
                      >
                        <div>{index + 1}.</div>
                        <div>{colorOption.name}</div>
                      </div>
                    );
                  })}
              </div>

1. 드롭다운 된 옵션 선택창에서 옵션을 선택하면 제품선택과 같이 클릭한 요소의 색상 데이터에 접근해서 해당 옵션의 색상을 state 값에 저장한다
2. 옵션을 선택 했을때 색상 옵션 드롭다운이 닫히도록 하고 수량 박스가 열리게 한다.

힘들었던 점

---

• 온클릭 이벤트를 통해 두세개의 클래스 네임을 바꿔주고 state 값을 저장함과 동시에 다음에 연계돼서 일어날 동작에 대해서 계획을 짜는것이 힘들었다.
• map메서드로 옵션을 나열하게 하는것은 어렵지 않았다. 하지만 해당하는 요소에 접근해서 클릭한 요소에 대한 데이터만을 빼오는것이 어려웠다.

클릭한 요소에 대해서만 데이터 빼오기 해결..

---

정말 많은 방법을 시도해보았다 event.target 을 통해서도 접근해보고 console.log(event)을 통해서 정말 접근할 수 있는 요소에는 거의 다 접근을 해본 것 같았다. 하지만 그것도 결국 한계가 있는 방법이라는 걸 깨달았고, 결국 찾아낸 방법은 onClick이벤트에 넘겨주는 인자로 map 메소드의 인자를 전달해서 클릭한 요소에 대해서만 접근을 할 수 있다는 것을 알게 되었다.

어려운 문제를 해결하면서 느낀점

---

정말 이걸 해결하려고 금요일, 토요일, 일요일 3일에 걸쳐 해결해 나갔다..
그렇게 고생해서 문제를 해결했을때는 내가 코딩을 시작한 이후 가장 성취감이 컸던 순간이 아니였나 싶다.