2022/리액트+TDD(完)

리액트 훅이 나오기 전까지 클래스 컴포넌트를 메인으로 사용하였다. 그러므로 훅에서 클래스로 변환해본다. * 리액트는 버전 16.8부터 함수 컴포넌트를 기본 컴포넌트로 사용하기 시작했지만, 그 이전에는 클래스 컴포넌트를 기본 컴포넌트로 사용했다. 기존코드와 변경코드를 비교할때 import, interface, export 또는 class 부분을 비교하면서 보면된다. 기존코드 Button 기존코드 : 더보기 import React from 'react'; import Styled from 'styled-components'; interface ContainerProps { readonly backgroundColor: string; readonly hoverColor: string; } const Conta..

State 테스트 App.tsx return ( { toDoList.map((item, index) => ( deleteToDo(index)}/> )) } setToDo(text))}/> ); } App.test.tsx import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import App from './App'; import 'jest-styled-components'; describe('', () => { it('renders component correctly', () => { const {container} = render(); const toDoList = screen.getBy..

Input 테스트 Input/index.test.tsx import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import 'jest-styled-components'; import { Input } from './index'; describe('', () => { it('renders component correctly', () => { const { container } = render(); const input = screen.getByDisplayValue('default value'); expect(input).toBeInTheDocument(); //expect(container)..

Button 테스트 App.test.tsx import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; describe('', () => { it('renders component correctly', () => { }); }); Button/index.test.tsx import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import 'jest-styled-components'; import { Input } from './index'; describe(''..

지금까지 다룬 Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터로써, 부모 컴포넌트로부터 전달받은 데이텅니 Props는 자식 컴포넌트에서 변경할 수 없었다. 이제부터 다룰 State는 Porps와는 다르게 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 컴포넌트 안에서 데이터를 변경할 수 있다. 컴포넌트 안에서 State로 데이터를 다루기 위해서는 useState라는 리액트 훅(Hook)을 사용해야한다. App.tsx 수정 import React, {useState} from 'react'; 컴포넌트 안에서 동적으로 변경할 데이터인 할 일 데이터를 다음과 같이 선언한다. // const [변수명, Set함수명] = useState(데이터 초기값); const [toDo, setTo..