2022

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..

인풋창 만들기 InputBox Input 폴더 생성후 index.tsx 생성 index.tsx import React from "react"; import Styled from "styled-components"; interface Props { readonly placeholder?: string; readonly onChange?: (text: string) => void; } const InputBox = Styled.input` flex: 1; font-size: 16px; padding: 10px 10px; border-radius: 8px; border: 1px solid #BDBDBD; outline: none; `; export const Input = ({placeholder, onCha..

경고창 만들기 Button/index.tsx export const Button = ({ label, backgroundColor = '#304FFE', hoverColor = '#1E40FF', onClick } : Props) => { return ( {label} ); } App.tsx alert('추가얼럿')}/> 결과

폴더명 todo-list 사전코드 : react typescript 기본 테스트 코드 :: Web Backend Developer (tistory.com) react typescript 기본 테스트 코드 기본세팅 npx create-react-app todo-list --template=typescript cd todo-list npm install --save styled-components npm install --save-dev @types/styled-components jest-styled-components App.tsx import.. kururu.tistory.com 버튼 컴포넌트 1개 생성 App.tsx import React from 'react'; import Styled from '..