[코드숨] 리액트 5주 차 회고

코드숨의 소프트웨어 개발의 지혜 <리액트 편> 9기 과정도 (포트폴리오 과정을 제외하고) 벌써 반이 지났다. 지난주까지는 로컬에서 동기적인 작업만 다뤘지만, 이번 주부터는 외부 API를 통해 데이터를 받아오는 비동기 작업에 대한 테스트까지 작성해야 해서 꽤 힘들었던 한 주였다.

테스트

이번 주 과제는 지역과 카테고리를 선택하면 그에 따른 레스토랑 목록을 보여주는 기능을 구현하는 것이다. 이때 지역 목록, 카테고리 목록, 레스토랑 목록은 외부 API에 요청해서 받아와야 한다. 이는 비동기 작업이 필요하기 때문에 redux-thunk라는 라이브러리를 사용했다.

 

지난 주까지는 reducer -> 작은 컴포넌트(e.g., Region, Category) -> 큰 컴포넌트(e.g., App)와 같이 상향식으로 개발했었는데, 이번에는 반대로 큰 컴포넌트에서 작은 컴포넌트로 개발하는 하향식 방법으로 개발을 진행해봤다. 구현할 기능이 명확하고, 그 방법 역시 명확히 정리가 돼 있다면 상향식 개발이 적절하지만, 그렇지 않을 경우에는 하향식 개발이 좀 더 유연하게 개발할 수 있는 것 같다. 실무에서도 후자의 경우가 더 많지 않을까 싶다.

 

이번 주에 가장 어려웠던 건 레스토랑 목록 조회 기능에 대한 테스트를 작성하는 것이었다. 레스토랑 목록을 조회하는 기능을 구현하는 건 그리 어렵지 않았지만, 문제는 선택한 지역이나 카테고리가 바뀔 때마다 레스토랑 목록을 다시 가져와야 한다는 것이다.

const RestaurantsContainer = () => {
  const dispatch = useDispatch();

  const region = useSelector((state) => state.selectedRegion);
  const category = useSelector((state) => state.selectedCategory);
  const restaurants = useSelector((state) => state.restaurants);

  useEffect(() => {
    if (region && category) {
      dispatch(searchRestaurants({ region, category }));
    }
  }, [region, category]);

  return (
    <Restaurants
      restaurants={restaurants}
    />
  );
};

최종적으로 RestaurantsContainer 컴포넌트의 코드는 위와 같다. 여기서 region 또는 category가 바뀔 때마다 searchRestaurants를 dispatch한다는 것을 테스트로 작성하기가 어려웠는데, 이에 대해 트레이너님과 여러 차례 질답을 주고받았다.

 

 

결론은 region 또는 category 같은 상태의 변화는 RestaurantsContainer 컴포넌트의 관심사가 아니기 때문에 E2E 테스트 같이 보다 큰 관점에서의 테스트가 필요하다는 것이다. 아샬 님의 풀이 영상에서는 나와 다르게 지역과 카테고리를 선택하는 부분에서 레스토랑도 검색하도록 구현한다. 이를 보면 지역과 카테고리 상태의 변화가 RestaurantsContainer 컴포넌트의 관심사가 아니라는 것이 좀 더 명확해지는 것 같다.

 

TDD를 하면, 관심사의 분리가 용이하다고 하는데 이번에 그 경험을 한 것 같다. 남은 과정을 진행하면서 이런 경험을 최대한 많이 해봤으면 좋겠다는 생각이다.

TIL

TIL 주 4회 작성

이번 주는 아쉽게도 TIL 주 5회 작성에 실패했다. TIL을 작성하지 못했던 목요일을 되돌아보면, 뭘 작성할까 고민하다가 딱히 생각나지 않아 나중으로 미뤘다가 아예 깜빡했었다.

 

지난 회고 때 깨달은 것 -> 성찰의 형식으로 TIL을 작성해보라는 피드백을 받았는데 그렇게 함으로써 TIL 작성 시간은 확연히 줄었지만 깨달은 것을 생각해내는 게 쉽지 않은 것 같다. 꾸준히 TIL을 작성하다 보면 나아지지 않을까 싶다.

다짐

이번 주는 과정이 한 달 넘게 진행되면서 약간 늘어진 감이 있었는데 초심을 잃지 않고 다시 끝까지 열심히 해보자.