테스트 코드의 의의

테스트코드가 필요하다고 생각이 된 이유는 

쇼핑몰 사이트의 카테고리페이지를 제작하면서 입니다 

 

여러 컴포넌트에서 같은 훅을 사용함으로써 사이드 이펙트 문제가 있었음

현재 상황은 수정된 코드를 사용해도 지장이 없지만

높은 결합도를 지니는 코드였다면 다른 모듈에 영향을 끼쳐 예상하지못한 동작을 발생시킬수있음 

 

또한 추후 리팩토링을 하는 과정에서도 테스트 코드를 기반으로 안정적으로 진행이 가능

 -> 문제가 발생했을 때 테스트코드의 피드백을 통해 빠르게 개선 가능 

 

현재까지 컴포넌트를 나누는 단위를 랜더링만을 고려했다면 추가적으로 테스트를 고려하여 하나의 컴포넌트가 하나의 동작을 수행하는 설계를 하게된다.

 

테스트코드가 잘 작성되어있다면 다른사람이 리팩토링할때 페이지의 시나리오를 이해하기 쉽다

 

 

발생한 문제 : 

WOMEN 카테고리의 ALL 에서 페이지가 3페이지로 이동한 후

다른 카테고리나 상세카테고리를 클릭하면 상품정보들이 뜨지않았음

 

원인: 

상품정보 페이지네이션을 카테고리라는 하나의 컴포넌트에서 훅을 통해관리를 함

카테고리나 상세카테고리가 변경될때 페이지를 초기화하는 코드가 없었음

페이지네이션 훅이 디테일 페이지의 리뷰제작시 제작한 훅을 

문제 상황을 고려해 변경하지않았음 

 

해결: 

카테고리와 세부항목을 키값으로 전달받게 되는데 이것이 변경되면 페이지가 1로 초기화 되도록 선언

  //카테고리나 세부항목이 변경되면 1페이지로 이동
  useEffect(() => {
    setCurrentPage(1)
  }, [key[0], key[1]]);