[TypeScript] React + TypeScript 사용 방법

⚡️react 프로젝트 설치는 이런 명령어를 사용

npx create-react-app 프로젝트명 --template typescript 

typescript 셋팅이 완료된 프로젝트 설치하는 방법

 

⚡️기존 react 프로젝트에 타입스크립트만 더하고 싶을 때

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

기존 프로젝트 경로에서 터미널을 오픈하신 후 입력해주면 끝입니다. 이제 .js 파일을 .ts 파일로 바꿔서 이용가능합니다.

이런거 할 바엔 깔끔하게 그냥 새로 프로젝트 만드는게 안전합니다.

 

⚡️프로젝트가 생성되고 TS 문법 사용 방법

 

1. 일반 프로젝트와 다른 점은 컴포넌트 파일은 js가 아니라 tsx로 확장자를 사용하셔야한다는 점입니다.

2. ts랑 똑같은데 jsx 문법을 지원합니다.

3. 코드짜는 것은 일반 리액트와 큰 다른점이 없습니다. 

4. 다만 함수, 컴포넌트, state, props 타입체크를 잘 해줘야 에러가 나지 않습니다. 

---

⚡️1. 일반 변수, 함수 타입지정

타입스크립트 배웠던 대로 똑같이 하면 됩니다. 

 

⚡️2. JSX 타입지정

리액트에선 변수나 자료에 <div></div> 이런걸 쌩으로 담아서 쓸 수 있습니다. 

왜냐면 리액트에서 <div></div> 이렇게 쓰면 HTML이 아니라 JSX라고 부르는 자료가 됩니다. 

이런 자료를 타입지정하고 싶으면 JSX.Element 라는 타입을 쓰시면 됩니다.

let 박스 :JSX.Element = <div></div>
let 버튼 :JSX.Element = <button></button>

 

⚡️3. function component 타입지정

function App () {
  return (
    <div>안녕하세요</div>
  )
}

함수니까 파라미터와 return 타입지정하면 됩니다. 

type AppProps = {
  name: string;
}; 

function App (props: AppProps) :JSX.Element {
  return (
    <div>{message}</div>
  )
}

 

컴포넌트는 return으로 JSX를 뱉으니 당연히 return 타입으로 JSX.Element 써주면 됩니다.

근데 생략해도 자동으로 타입지정됩니다. 

<Container a={<h4>안녕</h4>} />

function Container (props) {
  return (
    <div>{props.a}</div>
  )
}

참고로 props로 JSX를 입력할 수 있게 코드를 짜는 경우도 있습니다. 

그럴 땐 JSX.IntrinsicElements 라는 이름의 타입을 사용가능합니다. 

<div> <a> <h4> 같은 기본 태그들을 표현해주는 타입인데

그래서 위 컴포넌트에 타입을 넣고 싶으면 

type ContainerProps = {
  a: JSX.IntrinsicElements['h4'];
}; 

function Container (props: ContainerProps) {
  return (
    <div>{props.a}</div>
  )
}

 

이제 a라는 props자리에 <h4>만 넣을 수 있게 타입쉴드를 씌워놓은 것입니다

 

(참고) 아마 리액트 18버전부터는 JSX.IntrinsicElements는 props 타입넣을 때만 사용가능

 

⚡️4. state 문법 사용시 타입지정

state 만들 땐 그냥 자동으로 타입이 할당되어서 걱정할 필요는 없습니다.

state 타입이 나중에 변화할 수 있는 경우에는  타입을 미리 지정하십시오. 

 const [user, setUser] = useState<string | null>('kim');

그냥 <> 열고 타입넣으시면 됩니다.

Generic 문법을 이용해서 타입을 useState함수에 집어넣는 식으로 설정하면 됩니다. 

 

⚡️5. type assertion 문법 사용할 때 

let code: any = 123; 
let employeeCode = <number> code; //안됩니다

assertion 하고 싶으면 as 또는 <> 쓰면 되는데

리액트에서 컴포넌트로 오해할 수 있어서 꺾쇠 괄호는 리액트에서 쓰지않습니다.

as 키워드만 씁시다.

하지만 as 키워드는 타입스크립트 보안해제기 때문에 타입이 100% 확실할 때만 사용하도록 합시다. 

 

<결론>

타입스크립트 쓴다고 뭔가 리액트 개발방식이 달라지는게 아니라

함수 변수 정의부분 타입지정을 할 수 있다는 것만 달라진다.