[React with TypeScript] 타입스크립트를 적용한 리액트 프로젝트 생성하기

📄 타입스크립트를 적용한 리액트 프로젝트 생성하기

리액트에 타입스크립트를 적용한 프로젝트를 생성할 때는 다음과 같은 명령어를 사용합니다.

$ npx create-react-app ts-react-tutorial --template typescript

이렇게 프로젝트를 생성하면 src폴더 안에 App.tsx파일이 생성됩니다.

컴포넌트 App의 타입이 React.FC로 지정되어 있는것을 확인할 수 있습니다.

// App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

▪ React.FC

React.FC를 사용할 때는 props의 타입을 Generics로 넣어서 사용합니다.

// Greetings.tsx

import React from "react";

type GreetingsProps = {
  name: string;
};

const Greetings: React.FC<GreetingsProps> = ({ name }) => (
  <div>Hello, {name}</div>
);

export default Greetings;

✔ React.FC의 장점

1. props에 기본적으로 children이 들어있다.
2. defaultProps, propTypes, contextTypes 를 설정할 때 자동완성이 된다.

✔ React.FC의 단점

1. children이 옵셔널 형태로 들어가 있어 컴포넌트의 props타입이 명백하지 않다.

// src/Greetings.tsx

import React from "react";

type GreetingsProps = {
  name: string;
  mark: string;
};

const Greetings: React.FC<GreetingsProps> = ({ name, mark }) => (
  <div>
    Hello, {name} {mark}
  </div>
);

Greetings.defaultProps = {
  mark: "!",
};

export default Greetings;

// src/App.tsx

import React from "react";
import Greetings from "./Greetings";

const App: React.FC = () => {
  return <Greetings name="Hello" />;
};

export default App;

mark를 defaultProps에 넣었습니다.

하지만 App에서 해당 컴포넌트를 렌더링했을때 mark의 값이 없다고 알려주며 렌더링되지 않는 현상이 발생합니다.

이때 React.FC를 생략하면 정상적으로 렌더링되기 때문에 React.FC의 사용을 권장하지 않는 것을 권장하기도 합니다.

// React.FC를 사용하지 않은 Greetings.tsx

import React from "react";

type GreetingsProps = {
  name: string;
  mark: string;
};

const Greetings = ({ name, mark }: GreetingsProps) => (
  <div>
    Hello, {name} {mark}
  </div>
);

Greetings.defaultProps = {
  mark: "!",
};

export default Greetings;

출처

• 패스트캠퍼스 for velopert