코딩연습장

브라우저마다 기본적인 default style이 적용되어있기 때문에 사용자들에게 동일한 화면을 보여주기위해서는 default style을 제거해주어야 한다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbod..

https://styled-components.com/docs/api#typescript //src/styled.d.ts // import original module declarations import 'styled-components'; // and extend them! declare module 'styled-components' { export interface DefaultTheme { textColor: string; bgColor: string; btnColor: string; } } theme에 들어갈 속성들의 타입을 지정해주고 export해준다. //src/theme.ts import { DefaultTheme } from 'styled-components'; export const l..

import React, { useState } from 'react'; function App() { const [userName, setUserName] = useState(''); const onChange = (event: React.ChangeEvent) => { const { currentTarget: { value }, } = event; setUserName(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log(`hello ${userName}`); }; return ( Log in ); } export default App; 원래는 인자에 e만 넣었어도 됐는데 typescri..

const [counter, setCounter] = useState(1); useState를 사용하면 typescript가 알아서 형태를 파악한다. 이렇게 setCounter을 하면 어떤 형태의 인자를 넣어야하는지도 알려준다. 만약 다른 형태의 인자를 넣는다면 에러를 띄워준다. 보통 state의 형태가 바뀌는 일은 거의 없지만, 만약 다양한 형태의 값을 state로 사용해야한다면, 위 사진처럼 useState옆에 안에 작성하여 해당 형태들을 선언해줄수있다. 만약 해당 형태에 적합하지 않은 값이 들어온다면 (true) 에러가 발생한다. 즉, 일반적으로 형태가 변하지 않는 useState에서 초기값을 특정 형태로 잡아주었을 때 typescript는 해당 형태를 파악하고 자동으로 type을 지정해주므로 따로..

import styled from 'styled-components'; interface CircleProps { bgColor: string; } const Circle = ({ bgColor }: CircleProps) => { return ; }; const Container = styled.div` width: 200px; height: 200px; background-color: ${({ bgColor }) => bgColor}; border-radius: 100px; `; export default Circle; 해당 코드에서 bgColor은 필수적인 props이다. 만약 두 원중 하나에만 border을 적용하고 싶다면, 즉 optional props를 사용하고 싶다면 어떻게 해야 할까? in..

import Circle from './Circle'; function App() { return ( ); } export default App; import styled from 'styled-components'; interface CircleProps { bgColor: string; } const Circle = ({ bgColor }: CircleProps) => { return ; }; const Container = styled.div` width: 200px; height: 200px; background-color: ${({ bgColor }) => bgColor}; border-radius: 100px; `; export default Circle; Circle컴포넌트에서는 App컴포넌..

//타입스크립트로 cra하기 npx create-react-app project-title --template typescript //or yarn create react-app project-title --template typescript //js파일을 타입스크립트로 바꾸기위해 설치 npm install --save typescript @types/node @types/react @types/react-dom @types/jest //or yarn add typescript @types/node @types/react @types/react-dom @types/jest tsconfig.json파일이 없다면 추가로 설정 //tsconfig.json npx tsc --init "jsx": "react-j..

import styled from 'styled-components'; function App() { return ( {/* styledComponents에 props내려주기 */} ); } const Father = styled.div` display: flex; `; const Box = styled.div` width: 100px; height: 100px; //내려받은 props로 style 설정하기 background-color: ${({ bgColor }) => bgColor}; `; //타 styledComponents를 상속하고, 새로운 styled을 입력하기 const Circle = styled(Box)` border-radius: 50px; `; export default App; i..