TIL 16 | React 1차 프로젝트 수량 조정 기능 리팩토링

리액트 1차 프로젝트로 러쉬페이지 클론 프로젝트를 시작했다.
어느덧 프로젝트를 시작한 지 1주차 리팩토링 한 코드를 스스로 리뷰 해보려 한다.

상품 디테일 페이지에서 최소 수량을 1개 부터 최대 수량이 20개 까지 조정할 수 있도록 기능구현한 부분에 대해 리팩토링했다.

결과물

1차 코드

class Goods extends Component {
  constructor() {
    super();
    this.state = {
      value: 1,
      price: 15000,
    };
  }

  inputValue = e => {
    const { value } = e.target;
    this.setState({
      value: value,
    });
  };

   addValue = () => {
    const { value } = this.state;
    value > 19 ||
      this.setState({
        value: value + 1,
      });
  };

  minusValue = () => {
    const { value } = this.state;

    value < 2 ||
      this.setState({
        value: value - 1,
      });
  };

  render() {
  

state에 수량(value)의 초깃값을 1로 두고, addValue함수 와 minusValue 함수 내에서 setState 함수를 호출하여 값을 변경하였다.

처음에는 if조건문으로 아래와 같이 코드를 작성했다.

if (value > 19) {
      return;
    }
    this.setState({
      value: value + 1,
    });

처음에는 이 부분을 ES6 문법에서 논리연산자를 이용하여 더 짧은 코드를 쓰기 위해 리팩토링 했었다.

 addValue = () => {
    const { value } = this.state;
    value > 19 ||
      this.setState({
        value: value + 1,
      });
  };

그런데 코드 리뷰를 받아보니 코드를 볼 때 다른 사람이 봤을 때 직관적이고 이해할수 있는 코드가 좋은 코드인데, 내가 1차 리팩토링 한 코드는 오히려 한번 더 생각해야 이해할 수 있는 코드가 되어버렸다!

두둥! 자세히 살펴보면
내가 구현하고자 하는 기능은 최대 수량 20이 되었을 때 값이 리턴되는 것 인데! 수정한 코드도 같은 결과를 보여주고 있지만 20이 되었을 때가 예외 처럼 처리가 되어야 한다.

왜 이렇게 하면 안될까??

오히려 20초과 되었을 때 그 값을 그대로 보여주고 1~20까지 값이 들어오는 것이 정상범주의 값을 받아오는 것인데 내가 쓴 코드에서는 반대로 설정되어 있다.

그래서 코드를 더 보기 쉬운 처음 방법(if문을 쓴 코드)로 다시 수정었다.

이번에 리뷰를 받으면서 나 자신이 쓴 코드를 다시보는 것 보다 다른사람들이 더 내가 쓴 코드를 많이 본다는 것을 염두하면서 코드를 효율적으로 작성하고 리팩토링을 진행 해야겠다고 크게 느끼게 되었다.

오늘의 교훈

코드가 무조건 짧다고 좋은 것은 아니다!
무조건적으로 줄이는 실수를 하지 말자!

다시 고친 코드

class Goods extends Component {
  constructor() {
    super();
    this.state = {
      value: 1,
      price: 15000,
    };
  }

  inputValue = e => {
    const { value } = e.target;
    this.setState({
      value: value,
    });
  };

  addValue = () => {
    const { value } = this.state;
    if (value > 19) {
      return;
    }
    this.setState({
      value: value + 1,
    });
  };

  minusValue = () => {
    const { value } = this.state;
    if (value < 2) {
      return;
    }
    this.setState({
      value: value - 1,
    });
  };
  
render() {
    const { value, price } = this.state;
    return (
    
    //(이벤트 호출 부분)
    
<ul className="pwBox">
            <li>
              <strong>판매가</strong>
              <span className="price">
                &#8361; {this.state.price.toLocaleString()}
              </span>
            </li>
            <li>
              <strong>상품무게</strong>
              <span>200g</span>
            </li>
            <li>
              <strong>구매수량</strong>
              <span className="count">
                <button className="minus" onClick={this.minusValue}>
                  -
                </button>
                <input
                  className="inputCount"
                  onChange={this.inputValue}
                  value={this.state.value}
                ></input>
                <button className="plus" onClick={this.addValue}>
                  +
                </button>
              </span>
            </li>
          </ul>

오늘도 한가지 배웠다 화이팅!