개발새발

JSX 타입 이해하기JSX 문법은 HTML처럼 보이지만, 실제로는 순수 JavaScript 값과 TypeScript 타입으로 환원되는 구조이다. 타입 체계를 정확히 이해하면 strict 모드에서 흔히 마주치는 “속성이 존재하지 않는다” 오류를 미리 피할 수 있다.이번 글에서는 전역 JSX 네임스페이스에서 사용자 컴포넌트까지, 타입이 어떻게 연결되는지를 단계적으로 살펴보려고 한다. 1. 전역 JSX 네임스페이스@types/react에는 다음과 같은 선언이 존재한다.declare global { namespace JSX { interface Element extends React.ReactElement {} interface IntrinsicElements { form: React.D..

React에서 제공하는 Hook들은 모두 타입스크립트와 함께 사용할 수 있도록 정교하게 정의되어 있다. 본 글에서는 useState, useEffect, useRef, useMemo, useCallback 등 대표적인 Hook의 타입 정의를 공식 타입 정의 파일을 기준으로 하나씩 분석하고, 이를 실제 코드와 연결해 살펴보려고 한다. 1. useState 타입 분석useState는 상태와 해당 상태를 업데이트하는 함수를 반환한다. 다음과 같이 정의되어 있다:function useState(initialState: S | (() => S)): [S, Dispatch>];function useState(): [S | undefined, Dispatch>]; 핵심 개념Dispatch는 (value: A) => ..

React는 자바스크립트로 UI를 구성할 수 있도록 도와주는 라이브러리이다. 이때 사용하는 문법인 JSX는 HTML과 유사하게 생겼지만 자바스크립트 안에서 실행되며, 타입스크립트와 함께 사용할 경우 특별한 설정이 필요하다.이 글에서는 React 프로젝트에서 타입스크립트를 제대로 작동시키기 위한 설정과 함께, React 내부의 타입 시스템을 설명하려고 한다. 1. React는 타입스크립트를 지원하는가?React는 자체적으로 타입 선언을 제공하지 않는다. 대신 DefinitelyTyped 커뮤니티에서 관리하는 @types/react 패키지를 통해 타입 정의를 제공한다. 설치 명령어npm i react@18.2.0 @types/react@18.0.28npx tsc --init 설치 후 node_modules..