typescript4 [React] typescript component return type 타입스크립트에서 리액트 컴포넌트를 작성할 때 리턴 타입에 여러 종류가 있어서 오늘 이 내용을 가볍게 정리해보려 합니다. 크게 ReactNode, ReactElement, JSX.Element가 있습니다. 1. ReactNode render 메서드가 반환하는 값이 ReactNode라고 합니다. render 메서드는 클래스 컴포넌트에서 사용되는 함수도 ReactNode는 클래스 컴포넌트의 리턴 값으로 사용됩니다. 아래에서 살펴볼 ReactElement와 JSX.Element와 다른 점은 boolean, null, undefined를 값으로 가질 수 있다는 점입니다. 2. ReactElement jsx에서 컴포넌트를 작성하면 react.createElement를 사용하여 코드를 변환하는데, react.crea.. 2021. 12. 27. [React] 컴포넌트 props 타입 지정 typescript를 이용한 react에서 컴포넌트 props의 타입을 지정할 때 몇 가지 방법을 사용할 수 있습니다. 1. React.FC import React from "react"; interface MyComponentProps { name: string; } const MyComponent: React.FC = ({ name }) => { return {name}; }; export default MyComponent;첫 번째 방법은 React.FC를 사용하는 방법입니다. 사이에 타입을 삽입해주면 되는데요, 이 방법의 이점은 아래와 같습니다. props에 기본적으로 children이 들어있는 점 컴포넌트의 defaultProps, propTyps, contextTypes를 설정할 때 자.. 2021. 12. 27. [TypeScript] any와 unknown의 차이 TypeScript로 개발을 하면서 타입을 지정하기 애매한 경우에 저는 주로 any를 이용해서 타입을 지정해주었습니다. 최근에 unknown에 대해서도 알게 되었고, 둘의 차이점에 대한 글을 써보려 합니다. unknown 역시 any처럼 타입을 지정하기 애매할 때 사용한다고 합니다. 하지만 아래의 경우에서 any와 차이점을 보이는데요, 1) 할당 let typeUnknown: unknown; let typeAny:any; let typeAny2: any=typeUnknown; let typeString:string=typeUnknown; // 'unknown' is not assignable to type 'string'. let typeString2:string=typeAny; let typeObjec.. 2021. 8. 18. [React] Typescript를 이용해 React 프로젝트 만들기 Typescript를 사용하는 React 프로젝트를 시작하려면 아래의 명령어를 입력해주시면 됩니다. npx create-react-app my-app --template typescript 기존에 create-react-app을 이용해서 일반적인 프로젝트 생성을 했는데, 뒤에 추가로 --template typescript를 붙여준 것이죠. 출처: https://create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev 2021. 6. 13. 이전 1 다음
