코드숨 리액트 6기 4주차 주간회고

2021-12-272021-12-27

코드숨

코드숨 4주차 주간회고

벌써 교육 과정의 3분의 1이 지났다 😖
3F를 구분하기가 힘들어 이번에는 다른 형식으로 회고를 작성해본다.

새로 알게 된 것

RTL 잘 쓰기

RTL에서 제공하는 쿼리는 우선순위가 있는데, 이에 익숙해지기 위해 testing-playground.com를 활용하면 좋다. 크롬 익스텐션도 있어서 바로 설치했다.
RTL을 보다 잘 알고 사용하기 위해선 공식문서 외에도 Common mistakes with React Testing Library을 꼭 읽어야 하는 것 같다. RTL 개발자가 쓴 글인듯 한데, RTL을 사용하며 많이 하는 실수들에 대한 글이다. 한국어 번역 글도 있는데 상당히 유명한 글인듯 하다.

매번 mock을 초기화 하는 세 가지 방법

일단 초기화 해야 하는 이유는 각 테스트케이스가 독립적이기 때문이다. mock을 초기화 할 수 있는 방법으로는 세 가지가 있는 것 같다.

하나하나 다 초기화 하는 코드를 작성한다
beforeEach를 활용한다
jest.config.js 에 설정을 추가한다 (Reference. Jest에서 Mock을 정리하는 방법)

1번을 사용할 일은 없고, 보통 2번 아니면 3번을 사용할 것 같다. 2번과 3번을 비교해보면, 3번의 경우에는 ‘초기화 하지 않음’이 필요할 때 특정 케이스만 예외처리 하기에 곤란하겠단 생각이 들었다.

때문에 통제권 (코드리뷰에선 통제권이라고 표현하셨는데 좋은 것 같다)을 갖기 위해서는 3번보다 2번을 활용함이 더 적절할 것 같다. 다만 이번 과제에서는 그런 예외케이스가 존재하지 않아 3번을 이용했다.

Hook과 컨테이너의 관계

Reference. React Hook VS Container Component

리액트에서 Container-Presenter 패턴이 유명해진 본격적인 계기가 된 유~명한 글에서는 훅의 등장 이후로 이 패턴을 쓰지 말라고 말하고 있다.
왜냐하면 훅의 등장 이후로 컨테이너 역할을 훅이 대신해줄 수 있기 때문인데, 이와 관련해 팀 내부에서 이야기가 있었다.
논의 과정에서 내가 생각했던 바는 커스텀 훅으로 로직을 분리했고, 해당 훅이 컨테이너의 역할을 해주기 때문에, 커스텀 훅과 presenter 컴포넌트를 묶는 별도의 컨테이너 컴포넌트가 필요하지 않을 것이니 컨테이너를 없애거나, 아니면 다른 이름으로 변경하는 것이었다.
그 과정에서 위의 글을 공유받았는데, 내용이 아주 타당하다는 생각을 했고 트레이너 분께도 문의해보았는데 같은 생각이셨다.
자세한 내용은 위 글을 직접 읽어보는 것이 좋고, 요약하자면 다음과 같다.

뷰를 책임지는 Presenter 컴포넌트를 여러 비즈니스 로직과 함께 사용하고 싶다면, 즉 재사용할 일이 있다면 컨테이너 컴포넌트를 따로 만들어 사용할 수 있다.
```
function Container() {
  const data = useData(); // 커스텀 훅이 반환하는 것이 뭐든간에

  return <Presenter data={data} />; // Presenter를 재활용 할 수 있다
}
```

그럴일이 없다면 커스텀 훅으로 컨테이너를 대체할 수 있다.

function Component() {
  const data = useData(); // Container 역할을 함

  return <div>{data}</div>; // Presenter
}

대표적인 케이스만 테스트해도 된다

이번 과제에서 3개의 input을 핸들링 해야해서, input의 name을 활용해 하나의 이벤트 핸들러만으로 처리를 했고, 테스트는 3개의 input 모두에 대해 작성했었다. 근데 어차피 같은 로직을 쓰는 것이기 때문에 3개 중 1개만 대표적으로 테스트해도 된다고 한다.

이벤트 객체는 어디서 다루어야 할까?

presenter 컴포넌트에서 다루는 것이 좋다. 이벤트 객체를 이용해서 상태를 업데이트하기 때문에 상태를 다루는 이벤트 핸들러를 container 컴포넌트에 작성하고, 이벤트 객체도 거기서 다루게 했었다. 하지만 의존성 관리 측면에서, 이벤트 객체는 presenter 컴포넌트에서 처리하는 것이 더 적절하다.

잘 못한 것

의식적으로 TDD 사이클에 맞추어 커밋을 끊기. 작게 커밋을 쪼개 남기는 것에는 익숙한데 TDD 사이클엔 익숙하지 않아, TDD 사이클을 따라가다가 테스트 작성 - 구현을 하나로 퉁쳤다가, 뒤죽박죽 컨벤션의 커밋을 남기게 되었다.
presenter 컴포넌트에 대한 테스트가 미비했다.
4주차는 과제 제출일도 늦고 코드리뷰 피드백 반영도 늦었던 주차이다 ㅠㅠ😓

다음 주차에 할 것

의식적으로 TDD 사이클에 맞추어 커밋 남기기
다시 조금씩 그리고 빠르게 과제 제출하고, 빠르게 피드백 반영하기.
- 근데 월요일 제출은 벌써 망한 것 같다 ㅎ;;;
mock 초기화, presenter 컴포넌트에 대한 테스트 잊지말기

코드숨 4주차 주간회고