리팩토링

장바구니 페이지 리팩토링하기

 

이 프로젝트에서 가장 가독성 떨어지는 파일이다. 당시 디렉토리 구조를 아래와 같이 만들는데, pages 폴더에 웹 프로젝트에서 보여줄 각각의 페이지를 넣고 그 페이지를 구성하는 요소를 component 폴더에 담았다. 예컨데 메인페이지를 만든다고 가정했을 때, pages > main.js / component > header, footer, nav 이런식으로 쪼개서 만든 셈이다.

 

 

당시에 컴포넌트란 개념에 대해 UI의 최소 단위, 재사용 가능한 가장 작은 조각이라고 이해했다. 이걸 HTML의 시멘틱 태그처럼 코드를 봤을 때 그 구조가 한눈에 보이게 짜면 되겠구나! 라고 생각한 것이다. 아주 틀린 말은 아니겠지만 실제 현업에서 프로젝트를 진행하면서 보았던 컴포넌트들은 저정도? 크기는 작은 것도 아니었다... (input, button, modal 하나하나 다 컴포넌트로 만들어두고 사용하는 것에 놀랐던 기억이 새록새록...)

 

그래서 리택토링 전 Cart 컴포넌트의 구조는 이렇다.

 

function Cart(){

  return (
    <Container className='cart-container'>
      <header>
        <div className='cart-title'>
          <h4 className='active'>장바구니</h4>
        </div>
      </header>
        <section className='cart-box'>
          {/* 선택한 상품 */}
          <article className="cart-content">
            <CartItem />
          </article>
          {/* 총 상품 금액 */}
          <Payment />
        </section>
    </Container>
  )
}

function CartItem(){
  /* ... */
}

function Payment(){
  /* ... */
}

 

이걸 보고 일단 저 CartItem()과 Payment()부터 개별 컴포넌트로 빼야겠다는 생각이 만연했다. 이 파일을 열어보기 전까지 Payment()가 여기 있다는 사실도 잊고있었으니 당장 분리시켜야겠다.

 

해당 컴포넌트를 분리시키면서 신경 썼던 부분은 크게 두가지다.

• 가독성
• 추상화

 

return() 안에서 직접 연산하거나 state를 변경하지 말자.

// CartItem() 리팩토링 전 input

<input type='checkbox' 
    id={checkId} 
    onClick={() => {dispatch(checkItem(cartItemId))}} 
    checked={state[i].checked ? true && checkArr.push(cartItemId) : false && checkArr.drop(cartItemId)} readOnly
/>

// CartItem() 리팩토링 후 input
const handleCheckboxClick = () => {
    dispatch(checkItem(id));
};

const isChecked = checked ? true : false;
if (isChecked) {
    checkArr.push(id);
} else {
    const indexToRemove = checkArr.indexOf(id);
    if (indexToRemove !== -1) {
        checkArr.splice(indexToRemove, 1);
    }
}

return (
    ...
    <input
        type="checkbox"
        id={checkId}
        onClick={handleCheckboxClick}
        checked={isChecked}
        readOnly
    />
)

 

* splice()