리액트에 대해서 구글링을 하다보면 타입스크립트와 관련된 글이 종종 보입니다. 타입스크립트가 무엇인지 정확히 인지하고 있지 않기 때문에, 타입스크립트에 대해서 글을 남겨야겠다는 생각이 들었습니다.
제가 나중에 사용하고 알아보기 편하도록 보다 간단하게 작성될 수 있습니다.

타입스크립트를 사용하는 이유

자바스크립트는 동적 언어 입니다. 객체를 이루는 변수에 어떠한 타입의 값을 넣어도 작동합니다. 그리고 잘못된 값을 넣었다는 것을 실행 중에 알게 됩니다. 유연하다고 생각할 수 있겠지만 이는 단점이 될 수도 있을 것 같습니다.

서비스를 만들 때 사전에 테스트를 거치겠지만, 실제 서비스가 실행 될 때 테스트로 알 수 없었던 에러가 발견된다면 사람들이 많이 사용할 지 모르겠습니다.

이를 방지해줄 수 있는 언어가 타입스크립트 입니다. 타입스크립트는 자바스크립트 + 타입으로 자바스크립트의 상위(?)개념의 언어입니다. 타입스크립트는 코드를 작성할 때 변수의 타입을 지정할 수 있고 자바스크립트로 컴파일을 할 때 타입의 에러 여부를 알 수 있습니다.

하지만 자바스크립트보다 코드가 길어질 수 밖에 없고, interface나 type을 정의하면서 에러가 날 확률이 높아집니다. 이를 잘 구분해서 프로젝트를 시작할 때 적절한 언어를 선택해야겠습니다.

리액트를 타입스크립트로 작성하기

리액트를 타입스크립트로 만들기 위해서는

npx create-react-app "이름" --template typescript

를 터미널에 입력해주면 됩니다. 원래는 --template가 없이 --typescript만 입력해도 올바른 컴포넌트가 생성되는 걸로 검색결과가 나왔었는데 저는 타입스크립트로 생성되지 않았습니다. 아마 타입스트립트 버전의 문제가 아닐까 싶습니다.

여튼 올바르게 컴포넌트가 생성된다면 tsx파일들로 이루어진 컴포넌트들이 이 만들어집니다.

type과 interface

여기서 타입을 선언할 때 type과 interface 두가지 방법이 있는데 코드를 작성할 때 두가지를 혼용해서 사용하는 것 보단 하나로 통일해서 작성하는 것이 좋다고 합니다. type과 interface의 눈에 보이는 대표적인 차이점 중 하나는 확장하는 방법이 다르다는 것입니다.

interface PeopleInterface {
  name: string
  age: number
}

interface StudentInterface extends PeopleInterface {
  school: string
}

interface는 extends를 사용하고, type은 &을 사용합니다.

type PeopleType = {
  name: string
  age: number
}

type StudentType = PeopleType & {
  school: string
}

다음 차이점은 interface는 같은 이름으로 다른 속성을 선언하면 자동으로 확장이 되지만 type은 그렇지 않습니다.

interface D {
  title: string
}

interface D {
  ts: TypeScriptAPI
}

// 자동으로 확장이 된다.

const src = 'const a = "Hello World"'
E.ts.transpileModule(src, {})

type E = {
  title: string
}

type E = {
  ts: TypeScriptAPI
}

// 타입은 안된다.

(출처: https://yceffort.kr/2021/03/typescript-interface-vs-type)

타입스크립트로 컴포넌트 만들기

타입스크립트로 컴포넌트를 만들 때에는 주로 아래와 같은 와이어프레임의 형태로 만듭니다.

import React from 'react';

type A = {
  변수1: string;
  변수2: number;
  변수3?: string;
  onClick: (name:string) => void;
};

function B({ 변수1, 변수2, 변수3, onClick }: A) {
const handleClick = () => onClick(name);
  return (
    <div>
      Hello, {변수1} {변수2}
      {변수3 && <p>{변수3}</p>}
    </div>
    <div>
    	<button onClick={handleClick}>click</button>
    </div>
  );
}

export default B;

타입이나 인터페이스로 변수들의 속성을 정하고 function을 만들 때 사용할 변수와 타입을 적어줍니다.

생략해도 되는 값이 있다면 변수3 처럼 ?문자를 사용하여 작성해줍니다.

props를 받는 컴포넌트를 작성하고 싶다면 onClick 처럼 void값을 선언해줍니다. 그리고 해당 컴포넌트를 사용할 경우 아래와 같이 함수를 따로 작성해주면 됩니다.

import React from 'react';
import B from './B';

function App(){
  const onClick = (name: string) => {
    console.log(`${name} says hello`);
  };
  return <B name="Hello" onClick={onClick} />;
};

export default App;

(출처:https://velog.io/@velopert/using-hooks-with-typescript)