React/React+TypeScript
-
리액트 타입스크립트 스타일컴포넌트 Theme 적용하기React/React+TypeScript 2023. 2. 22. 03:06
1. styled.d.ts 파일을 만든다. 속에 interface 를 만든다. import "styled-components"; declare module "styled-components" { export interface UsingTheme { textColor: string; bgColor: string; btnColor: string; } } 2. 해당 interface 를 적용할 theme.ts 를 만든다. (단 여기서 UsingTheme 부분이 defaultTheme 로 쓰이면 안된다. 해당 단어는 기본설정이라 변경하면 다 적용되어버린다.) import { UsingTheme } from "styled-components"; export const lightTheme: UsingTheme = ..
-
React+TypeScript Form 형식을 공부해보자!React/React+TypeScript 2023. 2. 22. 02:58
📌 e : React.FormEvent ...(중략) const [value, setValue] = useState(""); const onchange = (e: React.FormEvent) => { const { value } = e.currentTarget; setValue(value); }; const onSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log(`Hello ${value}`) }; return ( Log in )
-
? / ?? 리액트 타입스크립트 props 전달할때 optional Chaining & null CheckReact/React+TypeScript 2023. 2. 21. 20:37
📌 지난 시간 리액트 타입스크립트 기반으로 props 를 전달해주는 방법을 배웠다. optional chaining 은 해당 prop은 전달되지 않을 수도 있다는 표현을 해줄 때 사용한다. personobj.name 은 .(chaining) personobj?.name 은 ?.(optional chaining) 이 된다. 즉 왼쪽 값이 비어있다면 해당 코드를 undefined 처리하라는 것과 같다. 아래 코드에서 추가로 보면 // interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age? : number // 🔥age가 비어있을 수도 있다. 라는 것을 암시한다. //age : number | undefined ..
-
React + TypeScript 에서 props 전달하는 법 with styled-componentsReact/React+TypeScript 2023. 2. 21. 19:51
📌 TypeScript 타입스크립트 기반 React 에서 props 를 전달하려면 어떻게 해야할까? // interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age : number } // 전달하려는 props 뒤에 interface 를 지정해준다. const SayHello = ({name, age} : personobj) =>{ return( sayHello {name} you are {age} ) } function App() { return } 📌 그렇다면 Styled-components 스타일 컴포넌트에 props 를 전달하려면 어떻게 해야할까? interface BoxProps { bgcolor : s..
-
타입스크립트로 리액트 시작하기 + 기본 문법React/React+TypeScript 2023. 2. 18. 17:31
📌 리액트로 타입스크립트 시작하기 npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @types/styled-components npm i styled-components 📌 Typescript 사용법 1. node 설치 후 터미널에 npm install -g typescript 2. tsconfig.json 파일을 만들고 { "compilerOptions" : { "target": "es6", "module": "commonjs", "lib": [ "es6" ] } } 를 붙여넣는다 3. ts 파일을 js 파일로 변환하기 위해 tsc -w 라는 명령어를 터미널에 쳐놓는다. // 1. 변수의 타입을 설정할 수 있다. let name: ..