react 리팩토링

멘토님에게 코드리뷰를 받아 리팩토링을 진행한 것에 대해 정리해보려고 한다.

---

<div className="prdCategoryBox">
    <h4>{prdDetailData.main_category_name}</h4>
    <h4>ISSUE NO.{prdDetailData.issue_number}</h4>
</div>
<h1>{prdDetailData.title}</h1>
<span className="prdPrice">₩{prdDetailData.price},000</span>

리팩토링이 필요한 부분

1. 상단에서 구조분해할당을 통해 prdDetailData로 매번 접근하는 것을 줄일 수 있다.

2. h4 태그를 사용하려면 순차적인 규칙에 따라 h1~h3까지 해당 페이지 내에서 사용되어야 한다.

 

const Detail = ({ prdDetailData }) => {
  const {
    date,
    description,
    detail_img_url,
    isbn,
    issue_number,
    language,
    main_category_name,
    pages,
    price,
    size,
    title,
  } = prdDetailData;
  
  (코드생략)
  
      return (
      
      (코드생략)

      <div className="prdCategoryBox">
        <span className="prdCategory">{main_category_name}</span>
        <span className="prdNumber">ISSUE NO.{issue_number}</span>
      </div>
      <div className="prdTitle">{title}</div>
      <span className="prdPrice">₩{priceThousand},000</span>

      )
  
  }

---

 <div className="prdMetaInfo">
    <span>
      <span>LANGUAGE</span>
      <span>{prdDetailData.language}</span>
    </span>
    <span>
      <span>SIZE</span>
      <span>{prdDetailData.size}</span>
    </span>
    <span>
      <span>PAGES</span>
      <span>{prdDetailData.pages}</span>
    </span>
    <span>
      <span>DATE</span>
      <span>{prdDetailData.date}</span>
    </span>
    <span>
      <span>ISBN</span>
      <span>{prdDetailData.isbn}</span>
    </span>
</div>

리팩토링이 필요한 부분

1. 상수데이터 및 map함수 사용해서 반복되는 부분 줄이기.

 

const PRD_META_INFO = [
    { id: 1, title: 'LANGUAGE', value: language },
    { id: 2, title: 'SIZE', value: size },
    { id: 3, title: 'PAGES', value: pages },
    { id: 4, title: 'DATE', value: date },
    { id: 5, title: 'ISBN', value: isbn },
  ];


    return (

    {PRD_META_INFO.map(ele => {
        return (
            <span key={ele.id}>
              <span>{ele.title}</span>
              <span>{ele.value}</span>
            </span>
        );
    })}
	)

---

 const [count, setCount] = useState(1);

 const MinusOne = () => {
    setCount(count - 1);
  };

 const PlusOne = () => {
    setCount(count + 1);
  };

리팩토링이 필요한 부분

1. camelCase에 따라 함수명을 컨벤션에 맞춰 수정하기

2. count라는 state명을 좀 더 명확한 네이밍으로 바꿔보기. 주문수량이라는 의미에 맞게

3. state값이 명확한 의미를 담는 것 처럼 함수명도 수정해주기

 

const [orderQuantity, setOrderQuantity] = useState(1);

function minusOrderQuantity() {
    if (orderQuantity < 2) {
      setOrderQuantity(1);
      alert('최소 주문수량은 1개 입니다.');
    } else {
      setOrderQuantity(orderQuantity - 1);
    }
}

function plusOrderQuantity() {
    setOrderQuantity(orderQuantity + 1);
}

---

 

<span>
  {count < 1
    ? (alert('최소 주문수량은 1개 입니다.'), setCount(1))
    : count}
</span>

리팩토링이 필요한 부분

1. 현재 로직은 count가 0일 때 1로 업데이트하고, 리렌더링되는 과정에서 alert창을 띄우고 다시 count값을 1로 바꿔주고 있다. 한 번 더 렌더링되는 과정을 거피는 것이 아니라 minusOne함수에서 현재 count값에 따라 아예 값의 변경이 일어나지 않게하자.

 

function minusOrderQuantity() {
    if (orderQuantity < 2) {
      setOrderQuantity(1);
      alert('최소 주문수량은 1개 입니다.');
    } else {
      setOrderQuantity(orderQuantity - 1);
    }
 }