분류 전체보기

경고창 만들기 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 '..

기본세팅 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 React from 'react'; import logo from './logo.svg'; import Styled, {keyframes} from 'styled-components'; const Container = Styled.div` text-align: center; `; const Header = Styled.header` background-color:..

C:\Users\xxx\Documents\react>npx create-react-app root-import --template=typescript tsconfig.json 소스추가 "compilerOptions": { ... "baseUrl" : "src" }, Component 폴더 생성후 아래 4개 파일을 이동시켜보자 이제 index.ts를 일부수정해보자 import App from 'Component/App'; npm run test import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; describe('', () => { it('renders compon..

보통 리액트는 컴포넌트를 기반으로 개발하게 되며 컴포넌트별로 CSS를 갖는 형식으로 스타일을 관리하게 된다. 하지만 모든 CSS를 한 곳에서 관리하지 않다 보면 CSS의 클래스 명이 중복되어 잘못된 스타일이 적용될 수 있다. 이런 문제를 해결하고자 style-components 라이브럴리가 탄생 style-components 장점 1) 클래스 이름 버그 해결 2) 더 쉬운 CSS 관리 : 모든 스타일이 특정 커모넌트에 연결되기 때문에 사용되지 않은 불필요한 스타일을 쉽게 제거 3) 간단한 동적 스타일 적용 : 컴포넌트의 상태에 따라 쉽고 직관적으로 동적 스타일 적용 4) CSS 자동 구성 : 페이지에 렌더링되는 컴포넌트를 추적하여 해당 스타일을 완전히 자동으로 추가 npx create-react-app ..