[REACT] react with typescript/ 리액트를 타입스크립트로 작성하기1탄 - 설치, 컴포넌트 props타입 지정

 

이제는 타입 스크립트가 대세!

타입스크립트를 사용하면 타입 추론을 개발할 때 오류를 줄여주고 코드를 작성하기 쉽게 도와준다.

전에는 리액트를 js로 작성했지만 이제는 타입스크립트로 하는 법을 배워야한다.

회사에서는 다 타입스크립트를 쓰기 때문에!

타입을 지정해주는 것이 자바에서는 당연한 것이었는데 자바스크립트에서는 이렇게 따로 뭔가 해야한다니.

처음에는 자바처럼 타입을 지정해주지 않아도 되는 점이 편리했는데 

따로 타입 스크립트를 써야한다면 애초에 자바처럼 타입을 지정해두는게 더욱 편하지 않을까?!

 

 

리액트 앱을 시작할 때부터 타입 스크립트로 작성하는 것을 추천한다고 한다. 

나는 타입스크립트에 대해서 지식이 거의 없기 때문에 일단 js로 구현하고 converting을 했지만

처음부터 ts로 작성하는 법을 배워보기로 했다!

 

 

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

1. 프로젝트 생성

npx create-react-app <appname> --template=typescript

애초에 앱을 typescript와 함께 설치한다.

그러나 나는 설치가 안되었다. 

그러면 아래의 코드를 설치하면 된다.

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

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

 

리액트 컴포넌트의 확장자는 tsx이다.

 

---

 

2. 컴포넌트 props설정하기

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가 뭐지!?

이렇게 화살표 함수로 컴포넌트를 선언하는 방식과 function 키워드로 선언하는 방식은 약간 차이가 있다. 

 

[React.FC]

import React from 'react';

type GreetingsProps = {
  name: string;
};

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

export default Greetings;

이렇게 React.FC 는 props의 타입을 Generics로 넣어서 사용한다.

React.FC를 사용하면 장점도 있고 단점도 있다. 

첫번째 장점은 props에 기본적으로 children이 들어가있다는 점

두번째는 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다는 것 입니다.

 

하지만 치명적인 단점은 defaultProps가 제대로 작동하지 않는다는 것이다.

 

만약에 props 중에 optional값이 있을 경우

부모 컴포넌트에서 props에 값을 내려주지 않았을 때

defaultProps를 지정해 준것을 읽어들이지 못한다는 것이다. 

그래서 이렇게 비구조화 할당을 할때 지정해주어야한다. 

 

 

[function]

import React from 'react';

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

function Greetings({name, mark}:GreetingsProps) {
    return(
        <div>
            Hello ! {name} {mark}
        </div>
    )
}

Greetings.defaultProps = {
    mark : '!'
}

export default Greetings

하지만 function 키워드로 컴포넌트를 선언하면 

이렇게 defaultProps를 지정해줄 수 있다. 

 

추세는 function 키워드를 사용하는 추세라고 한다. 

 

 

 

 

 

다음편에서 계속...