게시글

Cypress 를 이용해 React + TypeScript 환경에서 E2E 테스트를 하는 방법. npm install cypress 설치부터 cypress.json 의 baseUrl 설정, cy.visit 를 활용한 테스트 작성까지 다룬다.

@testing-library와 jest.mock을 활용한 React 페이지 렌더 테스트 방법을 알아본다. 라우터 컴포넌트를 Mock 처리해 App 컴포넌트 렌더 테스트 자체에 집중하는 예제를 다룬다.

React와 TypeScript 환경에서 GraphQL의 useQuery로 데이터를 가져오는 방법과, 원하는 시점에 쿼리를 실행할 수 있는 useLazyQuery(lazyQuery) 사용법을 예제 코드로 알아본다.

react-router-dom의 useHistory Hook으로 pathname, search, state를 담아 페이지를 전환하고, useLocation Hook으로 전달된 값을 받는 방법을 React 예제 코드로 알아본다.

React 컴포넌트 생명주기를 render() 함수를 중심으로 알아본다. constructor, componentDidMount, componentDidUpdate의 호출 순서와 setState로 State를 변경해야 리렌더링되는 이유를 정리했다.