2022-01-15 TIL

Facts (사실, 객관)

엘리스 SW 엔지니어 트랙 12주 차 마무리

주제: 상태관리, 테스팅

Feelings (느낌, 주관)

이번 주는 상태관리, 테스팅에 대해 학습했다. 테스트에 대해선 한 주동안 학습 계획이 잡혀있었던 걸로 기억하는데 변경이 된 건지, 하루 분량만큼의 강의만 제공됐다.

 

처음 리액트를 배울 때 useState를 먼저 사용하고, 나중에 리덕스를 배우게 되면서 개인 프로젝트에는 리덕스를 적용했었다. 이번 주차 학습을 통해 이번 기회에 기존에 사용해보지 못한 useContext와 useReducer를 배울 수 있었다. 마치 useContext와 useRducer를 합친 것이 리덕스처럼 느껴졌다. 교육 과정에는 포함되지 않았지만 react query나 18 버전에 포함될 suspence에 대해서도 알고 싶다.

 

기존에 jest에 제공하는 matcher와 리액트 테스팅 라이브러리에서 제공하는 쿼리 간의 구별이 잘 되지 않았는데, 이번 기회를 통해 조금은 더 잘 정리할 수 있게 되었다. 또 일부 matcher는 jest-dom에 의해 제공된다는 사실도 함께 알게 되었다.

 

상황에 따라 findBy와 getBy 중 어느 쿼리를 써야 할지 잘 구분할 수 있게 되었다.

 

userEvent 라이브러리를 활용하면 좀 더 직관적인 이벤트 테스트가 가능하다.

Findings (배운 점)

1. useContext는 리덕스의 Provider와 유사한 Context Provider를 제공한다. 내부의 컴포넌트는 깊이와 관계없이 Context에서 제공하는 value에 접근할 수 있다. context value가 바뀌면 내부 컴포넌트는 모두 리렌더링된다.
2. useReducer 또한 리덕스와 유사한 기능을 제공한다. 첫 번째 인자로 받는 reducer를 통해 액션 타입에 따라 새로운 상태를 리턴할 수 있다. 액션은 dispatch에 의해 전달된다.
3. Immer에 대해 알게 되었다. Immer를 활용하면 편리하게 불변성을 관리할 수 있다. 정확히는 불변성을 신경 쓰지 않으면서 상태를 업데이트할 수 있게 해 준다. (참고 - 벨로퍼트)
4. redux-toolkit 에선 기본적으로 Immer가 적용되어있다.
5. getBy는 DOM이 렌더링되었을 때 반드시 있어야 하는 요소에 대해서만 사용해야 한다. 페이지에 존재하지 않는다면 에러를 던지기 때문이다. findBy는 찾는 요소가 없더라도 비동기적으로 기다리며, 정해진 timeout동안 찾지 못하면 에러를 던진다. 유저의 동작에 따라 새롭게 생성되는 요소 혹은 다른 비동기적 요소를 찾기 위해서는 findBy를 써야 한다.
6. ByRole 쿼리로 다양한 요소에 접근할 수 있다. 다만 태그의 이름과 role이 서로 일치하지 않기 때문에 적절한 role를 갖다 써야 한다. 예를 들어 리스트는 'li'가 아니라 'listtiem'이다.

Affirmation(자기 선언)

유튜브 보는 시간을 줄인다.