즐겁게, 코드

채널톡의 bezier-react 코드를 리딩하던 중, 낯선 구문을 만나게 되어 찾아보게 되었어요. import React, { // 임포트 단계에서 type 키워드를 붙여주는 것이 가능했던가? // 어떤 기능적 역할을 하는 것이지? type Ref, forwardRef, useMemo, } from 'react' 바로 import type 구문인데요, 해당 구문을 활용하면 불러오는 대상이 값인지 타입인지를 명시할 수 있답니다. // model/user.ts export interface User { id: string; name: string; } // component.tsx import { type User } from "@/model/User"; interface Props { user: User;..

함수 컴포넌트를 사용할 때 React.FC 라는 제네릭을 활용하면 children, displayName, defaultProps 등의 함수 컴포넌트가 갖는 기본 속성들에 대해 타입 지원을 받을 수 있습니다. import React from "react"; export const Child: React.FC = ({children}) => { return {children} } 아마 React.FC를 사용하는 가장 큰 이유도 chlidren을 갖는 컴포넌트의 타입을 지정하기 위해서일 텐데요, 하지만 React 18부터는 위 코드에서 Property 'children' does not exist on type... 이라는 오류가 출력됩니다. 그 이유는 children 프로퍼티가 React.FC에서 제외되었..

타입스크립트에는 원시 타입 외에도 타입을 조작할 수 있는 유틸리티 타입이 존재합니다. 오늘은 여러 유틸리티 타입 중 Partial, Required, Pick이라는 타입을 사용해 보겠습니다. type userType = { id: number; email: string; password: string; firstname: string; lastname: string; }; 여기 이름, 비밀번호, 이메일, 고유번호로 구성된 타입이 있습니다. 하지만 어떤 컴포넌트에서는 비밀번호가 필요하지 않을 수도 있고, 또다른 컴포넌트에서는 이메일이 필요하지 않을 수도 있습니다. type userType = { id?: number; email?: string; password?: string; firstname?: st..

타입스크립트가 점점 프론트엔드 생태계에서의 입지를 굳혀가고 있는데요, 간단한 입력값을 상태로 관리하는 예제를 타입스크립트로 구성해보도록 하겠습니다. 😆 진짜 쉬워요! 타입스크립트를 끼얹기 전까진... import React, { useState } from "react"; const App = () => { const [name, setName] = useState(null); const handleInput = (e) => { setName(e.target.value); }; return ( {name} ); }; export default App; 입력받는 값을 상태로 관리하고 화면에 나타내는 코드입니다. 이렇게만 보면 간단하지만 갑자기 타입스크립트를 얹게 되면 막막할 수도 있는데요, 위 코드에 차근..

타입스크립트 코드를 트랜스파일하기 위해서는 tsc 커맨드를 사용합니다. // index.ts const name: string = "chanmin"; $ tsc index.ts // index.js var name = "chanmin"; 다만 위의 트랜스파일 결과물은 var 키워드를 사용하는 구버전 자바스크립트 코드입니다. 어떻게 하면 이 끔찍한 var 에서 벗어날 수 있을까요? ⚙️ tsconfig 설정 타입스크립트를 조금 잘 아는 분이시라면 tsconfig 파일에서 타겟 옵션을 지정할 수 있다는 것도 알고 계실 겁니다. // tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this ..