서녕이네 개발단지

ReactNode ReactNode는 TypeScript에서 React 컴포넌트에서 반환될 수 있는 모든 종류의 노드(node)를 나타내는 타입이다. React 컴포넌트의 렌더링 결과로 JSX요소, string, number, array, boolean, null, undefined 등이 포함될 수 있는데, 이러한 모든 데이터 타입을 대표하는 것이 ReactNode이다. ReactNode는 children 속성의 타입으로 가장 많이 사용하는 타입이다. import React, { ReactNode } from "react"; interface Component { children: ReactNode; } const ComponentProps: React.FC = ({ children }) => { ret..

React.FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입이다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입이다. React 18버전 이전까지 FC 사용을 지양했던 이유는? 1. children React.FC를 사용하면 컴포넌트 props는 type이 ReactNode인 children을 암시적으로 가지게 된다. type TagName = { name: string; }; const Tag: React.FC = ({ name }) => ( {name} {children} ); 👉🏻 타입스크립트를 쓰는 이유중 하나가 정확한 타입을 지정 해주면서 JS코드의 안전성을 향상 시키는 부분인데, F..

Type Alias와 Interface의 차이? type alias type ButtonProps = { onClick: () => void; label: string; }; const Button = (props: ButtonProps) => { return {props.label}; }; interface interface ButtonProps { onClick: () => void; label: string; } const Button = (props: ButtonProps) => { return {props.label}; }; Type Alias와 Interface의 차이점? 1. 확장 가능성 Type Alias : type은 기존 타입을 조합하여 새로운 타입을 만드는 데 좀 더 강력한 기능을 제..

1. tsconfig의 역할은 무엇인가? tsconfig.json은 타입스크립트를 ➡️ 자바스크립트로 변환 시키는 컴파일 설정을 한번에 정의 해놓는 파일이라고 보면 된다! 💡 프로젝트를 컴파일 하는데 필요한 루트 파일, 컴파일러 옵션 등을 상세히 설정할 수 있다! tsconfig에서 옵션들을 미리 정의해 놓으면, 그 후로는 컴파일 할때 명령어에 일일히 대상 파일이나 옵션을 지정하지 않아도 된다. 그래서 tsc 나 ts-node 명령어를 그냥 실행하게 되면, 현재 폴더에 있는 tsconfig 설정을 기준으로 프로젝트에서 소스들을 변환 작업(컴파일)을 진행하게 되는데, 만약 현재 폴더에 tsconfig 설정 파일이 없다면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나간다. 2. tsconfig는 어디 ..