[TypeScript] React에서 타입 지정

1. JSX.Element

JSX.Element 타입은 리액트에서 사용하는 JSX 자료형을 명시한다. 리액트에서는 HTML처럼 생긴 JSX를 사용하는데, 이 타입을 지정하고 싶으면 JSX.Element를 사용하면 된다.

JSX를 변수에 담을 때

const container: JSX.Element = <div className="container"></div>

📌 JSX.IntrinsicElements
태그까지 지정하고 싶다면 JSX.IntrinsicElements를 사용해보자.

const container: JSX.IntrinsicElements['div'] = <div className="container"></div>

컴포넌트 타입 지정 시

1) 컴포넌트를 담은 함수
컴포넌트는 항상 JSX를 return하기 때문에 JSX.Element로 타입을 지정하면 된다.

const App (): JSX.Element {
	return (
    	...
    )
}

2) props 타입을 지정하고 싶다면

방법 1.

(App.tsx)

const App (): JSX.Element {
  return (
    <div className="App">
      <Header menu={ menu } contact={ contact }/>
    </div>
  )
}

(Header.tsx)

const Header (props: { menu: string, contact: number }): JSX.Element {
  return (
    <div className="header">
      {props.menu}
      {props.contact}
    </div>
  )
}

방법 2.

컴포넌트 바깥에 type 묶음을 만들어 사용한다.

(Header.tsx)

type Props묶음 = {
  menu: string,
  contact: number
}

const Header (props: Props묶음): JSX.Element {
  return (
    <div className="header">
      {props.menu}
      {props.contact}
    </div>
  )
}

2. state 타입 지정

1) 초깃값이 있는 경우
지정하지 않아도 자동으로 설정된다.

2) 초깃값이 없는 경우
제너릭 문법으로 타입을 지정해준다.