고차 컴포넌트(HOC)와 Hooks React를 비교적 최근에 사용하기 시작한 개발자 분들이라면, 클래스형 컴포넌트보다 함수형 컴포넌트와 Hook에 익숙할 것입니다. React는 초기에 클래스 컴포넌트만을 지원하였지만 16.8버전에서 Hooks를 도입하며 본격적으로 함수형 컴포넌트를 지원하게 되었습니다. 현재에는 공식 문서에서도 함수형 컴포넌트 + Hooks 조합을 권장하고 있는 상황이지만 여전히 클래스 컴포넌트 또한 지원하고 있기에 우리는 과거 코드를 열다 보면 클래스 컴포넌트를 종종 발견하곤 할 것입니다. 이번 포스트는 클래스 컴포넌트와 함수형 컴포넌트를 비교하는 내용은 아닙니다. 단지 컴포넌트 간에 재사용될만한 로직들을 간편하게 정리하는 방법에 대해 공부하다 자연스레 커스텀 훅을 접하게 되었고 클래..

React Router v6 React Router는 현재 리액트의 라우팅 기능을 지원하는 가장 인기있는 라이브러리입니다. 이 React Router가 지난 2021년 11월에 정식 6.0 버전이 릴리즈되었습니다. 5.0 버전에서 큰 변경사항이 없었고 이후 꽤나 오랜만에 출시된 버전이기에 라이브러리에 많은 변화가 있습니다. 그래서 v5를 사용하고 있는 프로젝트에 v6 도입을 원활하게 하기 위해 두 버전 간의 차이를 중심으로 정리해보았습니다. React Router v6는 React 16.8 이상의 버전을 필요로 합니다 React Router v6는 React Hook을 많이 사용하기 때문에 버전 업그레이드를 위해 React 16.8 이상의 버전을 사용해야 합니다. 좋은 소식으로는 React Router ..

React Testing Library 튜토리얼 본 포스트는 기초적인 React Testing Library 사용법에 중점을 두고 있습니다. 리액트 테스트 코드 설계에 관한 포스트는 향후 학습을 진행하고 작성해볼 예정입니다 Testing Library 테스팅 라이브러리는 UI 컴포넌트를 사용자 중심적인 방식으로 테스팅할 수 있게끔 하는 패키지이다 우리는 테스트에 구현 세부 사항이 포함되지 않도록 하여 컴포넌트 리팩토링이 진행되더라도 테스트에는 영향을 끼치지 않는 방법을 도입하고 싶어 한다. 그런 면에서 테스팅 라이브러리는 사용자가 애플리케이션을 어떻게 사용하는지에 최대한 가깝게 테스트를 작성할 수 있도록 도움을 주는 유틸리티를 제공한다 테스팅 라이브러리의 코어인 'DOM Testing Library'는 ..