2022/리액트+TDD(完)

react-router

- 보통의 웹 서비스는 URL을 기준으로 화면을 표시한다 - 리액트는 싱글 페이지 애플리케이션의 UI를 만드는 자바스크립트 라이브러리이다. - 리액트에서 사용자가 요청한 URL을 이용하여 특정 컴포넌트를 표시하도록 하기 위해서는 react-router라는 외부 라이브러리를 사용해야 한다 npm install --save react-router-dom npm install --save-dev @types/react-router-dom - Switch -> Routes 로 변경 https://reactrouterdotcom.fly.dev/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes This is the same app in v6: // Thi..

Context API / localStorage TestCode

localStorage 를 적용한 테스트 코드를 작성해보자 Context/ToDoList/index.test.tsx import React, {useContext} from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import 'jest-styled-components'; import { ToDoListProvider, ToDoListContext } from './index'; beforeEach(() => { localStorage.clear(); }); describe('ToDoList Context', () => { it('renders component correctly', () => { const ..

Context API / localStorage - 2

변경전 초기 코드 다운받기(git) git clone https://github.com/gusrl6394/context-todo-list cd context-todo-list git reset --hard 2f89bca4ec8f1399a34e232835b2e66daa79a702 localStorage - ContextAPI를 사용하여 컨텍스트를 만들고 전역으로 데이터를 관리하도록 변경해보았으며 이렇게 관리되는 데이터를 외부에 저장하는 방법중 하나인 localStorage를 알아보자 - 보통 웹 서비스에서는 이런 데이터를 API를 통해 서버에 저장하고 가져온다. 이것은 추후 연습해보기로 한다. 변경된 부분) Contexts/ToDoList/indes.tsx import React, {createContex..

Context API / localStorage - 1

하위 컴포넌트 사이에 공유되는 데이터를 위해 매번 Root Component (공통 부모 컴포넌트) 를 수정하여 모든 컴포넌트에 Props를 전달하여 데이터를 사용하는 것은 매우 비효율적이다. 이처럼 비효율적인 문제를 해결하기 위해 리액트에서는 Flux 라는 개념을 도입하였고 그에 걸맞은 Context API 를 제공학 시작했다. Context 는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적으로 데이터를 다룬다. Context 를 사용하기 위해서는 Context API를 사용하여 Context 의 Provider와 Consumer를 생성해야 한다. npx create-react-app context-todo-list --template=typescript npm inst..

클래스 컴포넌트 라이프 사이클

React lifecycle methods diagram (wojtekmaj.pl) React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl wojtekmaj/react-lifecycle-methods-diagram: Interactive React Lifecycle Methods diagram. (github.com) GitHub - wojtekmaj/react-lifecycle-methods-diagram: Interactive React Lifecycle Methods diagram. Interactive React Lifecycle Metho..