서녕이네 개발단지

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은 기존 타입을 조합하여 새로운 타입을 만드는 데 좀 더 강력한 기능을 제..

타입 가드(Type Guard)란? 데이터의 타입을 알 수 없거나, 될 수 있는 타입이 여러 개라고 가정할 때 조건문을 통해 데이터의 타입을 좁혀나가는 것 데이터의 타입에 따라 대응하여 에러를 최소화할 수 있다. 타입을 통해 '가드'하는 코드, 방어적인 코드를 짤 수 있다. 타입가드의 필요성? 1. 유연한 데이터 다루기 : 외부 API 호출이나 사용자 입력과 같이 동적으로 변하는 데이터를 다룰 때, 해당 데이터의 형태를 확실히 알기 어려울 수 있다. 이때 타입 가드를 사용하면 데이터의 구조나 속성에 따라 분기할 수 있어 보다 정확한 타입 정보를 활용할 수 있다. 2. 다양한 타입 처리 : 유니온 타입(Union Types)과 같이 여러 타입을 하나의 변수로 다룰 때, 각각의 타입에 따라 다른 동작을 해야..