Front-End/TypeScript

[Typescript] 16장 JSX

Tinkies 2025. 3. 24. 15:27

1. 기본 사용법 (Basic Usage)

JSX는 Javascript XML의 약자로, Javascript 코드 안에 HTML과 유사한 구문을 사용할 수 있습니다. React에서는 UI를 정의할 때 주로 사용합니다. 기본적인 JSX의 예시는 다음과 같습니다.

const element = <h1>Hello, world!</h1>;

2. Typescript에서 JSX 설정

먼저 Typescript에서 JSX를 사용하기 위해 Typescript를 설치합니다. 

npm install --save-dev typescript

 

React와 관련된 타입 정의도 설치합니다.

npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

 

tsconfig.json 파일을 생성하고, 이 파일안에 Typescript 컴파일러 옵션을 설정하는데 사용합니다.

{
  "compilerOptions": {
    "target": "es5", // ES5로 컴파일
    "module": "commonjs", // 모듈 시스템 설정
    "jsx": "react", // JSX 변환 설정
    "strict": true, // 모든 엄격한 타입 검사 활성화
    "esModuleInterop": true, // ES 모듈과 CommonJS 모듈 간의 호환성
    "skipLibCheck": true // 라이브러리 타입 검사 건너뛰기
  },
  "include": ["src/**/*"], // 포함할 파일 경로
  "exclude": ["node_modules"] // 제외할 파일 경로
}

 

다음 JSX 문법을 사용해 Typescript 파일을 작성합니다. 파일 확장자는 .tsx로 생성해주어야 합니다.

const element = <div>Hello,World</div>;

console.log(element);

 

다음 ts-node를 설치하고 아래 명령어로 파일을 실행합니다.

import React from 'react';

const element = <div>Hello, World!</div>;

console.log(element);

3.as 연산자 (The as operator)

JSX 요소의 타입을 명시적으로 지정하려면 as 연산자를 사용합니다.

// src/as-operator.tsx
import React, { JSX } from 'react';

const element = (<div>Hello, World!</div>) as JSX.Element;
console.log(element);

4. 타입 검사 (Type Checking)

타입 검사는 Typescript의 중요 기능으로, JSX 요소의 타입을 검증해 코드의 안전성을 높입니다. 먼저 내장 요소는 JSX에서 사용되는 HTML 태그를 Typescript에 의해 내장 요소로 인식하게 만듭니다.

import React, { JSX } from 'react';

const divElement: JSX.IntrinsicElements['div'] = <div>Hello</div>;

console.log(divElement);

 

값에 따라 JSX 요소의 타입도 정의할 수 있습니다. 커스텀 컴포넌트를 작성할 때 타입을 지정해줍니다.

interface MyProps {
  title: string;
}

const MyComponent = (props: MyProps) => {
  return <div>{props.title}</div>;
};

const element = <MyComponent title="Hello" />;

console.log(element);

 

함수형 컴포넌트는 props를 인자로 받아 JSX를 반환합니다.

import React from 'react';

interface Props {
  message: string;
}

const MyComponent: React.FC<Props> = ({ message }) => {
  return <div>{message}</div>;
};

console.log(MyComponent);

 

클래스형 컴포넌트는 React.Component를 확장해 props와 state를 관리합니다.

import React from 'react';

interface Props {
  title: string;
}

class MyComponent extends React.Component<Props> {
  render() {
    return <h1>{this.props.title}</h1>;
  }
}

console.log(MyComponent);

 

JSX 속성의 타입은 Props 인터페이스를 통해 관리합니다.

import React from 'react';

interface Props {
  isActive: boolean;
}

const MyComponent: React.FC<Props> = ({ isActive }) => {
  return <div>{isActive ? '활성화' : '비활성화'}</div>;
};

console.log(MyComponent);

 

자식 요소의 타입도 props에 정의할 수 있습니다.

import React from 'react';

interface Props {
  children: React.ReactNode;
}

const Wrapper: React.FC<Props> = ({ children }) => {
  return <div>{children}</div>;
};

console.log(Wrapper);

5. 표현식 포함하기 (Embedding Expression)

JSX 내에서 Javascript 표현식을 중괄호 { }를 사용해 포홤할 수 있습니다.

const name = 'Alice';
const element = <h1>Hello, {name}</h1>;

console.log(element);

6. 팩토리 함수 (Factory Functions)

팩토리 함수를 컴포넌트를 생성하는 함수로, 다양한 props를 받아 JSX를 반환합니다.

function createComponent(message: string) {
  return () => <div>{message}</div>;
}

const MyComponent = createComponent('Hello');

console.log(MyComponent());

 

 

GitHub - Koras02/typescript-bloging

Contribute to Koras02/typescript-bloging development by creating an account on GitHub.

github.com

 

LIST