[주니어도 하는 타입스크립트] 리액트에서 타입스크립트로 코드 짜기 (feat. 제네릭)

리액트 실무자로서, 타입스크립트를 활용한 리액트 프로젝트는 어떻게 만드는지 궁금해졌다.

그래서 제네릭 기법을 활용한 간단한 타입스크립트 코드를 리액트에서 실행시켜보기로 했다.

 

제네릭 사용법은 앞에서 이미 숙지한 바 있으므로 아래 링크로 대체한다.

 

[주니어도 하는 타입스크립트] 제네릭이란 무엇이고 어떻게 쓰는것일까?

 

 

먼저 타입스크립트 코드 기반으로 리액트 프로젝트를 만드려고 한다면, 앱 실행부터 기존과는 다르다.

 

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

 

 

위의 코드로 앱을 생성한다. 만일, 기존에 진행중이던 리액트 프로젝트를 타입스크립트로 바꾸길 원한다면 살짝 과정이 복잡해진다..

 

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

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

요렇게 타입스크립트를 추가 설치한 뒤 js로 설정된 파일을 tsx로 변경해줘야 한다. 그리고 서버를 한번 껐다 재 연결하면 좋다.

(하지만 본인은 요 과정에서 뭔가 코드가 꼬이면서 잘 작동하지 않아 그냥 처음부터 다시 실행하는 위의 방법을 썼다..)

 

참조: https://create-react-app.dev/docs/adding-typescript/

 

 

그러면 타입스크립트 기반의 리액트 프로젝트를 만들 준비가 완료됐다. 컴포넌트 파일 하나를 만들고 App.tsx에 화면에 보여지도록 컴포넌트를 불러오는 작업을 했다.

 

// App.tsx

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

const App = () => {
  return <Greeting />
}

export default App;

 

App.tsx에 컴포넌트 Greeting을 불러온다.

 

 

// Greeting.tsx

import React, { FC } from "react";

interface GreetingsProps {
    name: string;
    gender: number;
}

const Greeting: FC<GreetingsProps> = ({ name, gender }) => (
    <div>Hello I'm {name}. I'm a {gender == 1 ? 'man' : 'woman'}.</div>
)

export default Greeting;

 

 

인터페이스 GreetingsProps에 'name'과 'gender' 값의 타입을 각각 지정해 줬고,

Greeting에 리턴값으로 div로 싼 텍스트를 작성했다. 이 텍스트에는 name과 gender값들이 props로 넘어와 리턴해주고 있다.

그렇다면 부모 영역App.tsx에서 props 값을 넘겨야할 차례.

 

 

// App.tsx

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

const App = () => {
  return <Greeting name={"길동 홍"} gender={1} />
}

export default App;

각각 스트링과 넘버로 name, gender 값을 잘 넘겨주었다. 빨간줄 에러는 뜨지 않는다.

 

값이 잘 나오는걸 확인할 수 있다.

 

하지만 여러 블로그 글들을 읽다보니 react.FC를 사용하는걸 지양하는 게 좋다고들 한다.

react.FC를 사용하면 디폴트값으로 props에 children 값이 넘어오는데, 이를 사용할지 안할지 별도로 선언해줘야하는 불편함이 있고,

react.FC 사용시 defaultProps, propTypes, contextTypes 등이 디폴트값으로 넘어오는데, 만일 defaultProps를 초기 설정을 임의로 할 경우 에러가 발생한다.

때문에 이런 다양한 설정들을 활용할때 불편함을 겪게 된다는 것.

 

자세한 내용은 아래 링크 참조하면 좋다.

참조: https://velog.io/@velopert/create-typescript-react-component

 

 

그래서 react.FC를 빼고 코드를 다시 작성했다.

 

 

// App.tsx

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

const App = () => {
  return <Greeting name={"길동 홍"} />
}

export default App;

// Greeting.tsx

import React from "react";

interface GreetingsProps {
    name: string;
    gender: number;
}

const Greeting = ({ name, gender }:GreetingsProps) => (
    <div>Hello I'm {name}. I'm a {gender == 1 ? 'man' : 'woman'}.</div>
)

Greeting.defaultProps = {
    gender: 1
}

export default Greeting;

 

 

매우 잘 작동하는 것을 확인했다.

작성하다보니 더 복잡한 코드도 타입스크립트로 짜보고 싶다는 욕심이 생긴다!