TypeScript - 타입스크립트로 리액트 컴포넌트 만들기

우선 리액트 프로젝트를 만들어야 한다.
좋은 소식은 create direct app에서 타입스크립트 지원을 자체적으로 해준다는 것이다.
npx create-react-app '폴더명' --typescript

💡여기서 React.FC를 사용하면 좋은점은
1. 자동적으로 Children이라는 props가 기본적으로 탑재되어 있다.
리액트 노드로 되어 있어서 우리가 별도로 children값을 넣어주지 않아도 된다.
2. Greetings.을 입력하게 되면 자동완성되게 된다.

하지만 defaultProps를 사용할 경우 문제가 생긴다.
아래와 같이 코딩을 해야하며 비구조화 할당을 할 당시에 선언을 해줘야 원할하게 이용할 수 있다.

//App.tsx

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

const App: React.FC = () => {
  return (
    <Greetings name='리액트'/>
  );
}

export default App;


//Greeting.tsx

import React from 'react';

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

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



export default Greetings;

또한 만약에 React.FC를 사용하지 않고 function을 사용하게 된다면 default.Props가 정상적으로 작동한다.

💡그렇다면 Function함수로 작성하게 되면 어떻게 작성할 수 있을까?

//App.tsx
import React from 'react';
import Greetings from './Greetings'

const App: React.FC = () => {
  return (
    <Greetings name='리액트'/>
  );
}

export default App;


//Greetings.tsx
import React from 'react';

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

function Greetings ({name, mark, optional }: GreetingsProps) {
    return <div>
        Hello, {name} {mark}
        {optional && <p>{optional}</p>}
    </div>;
}

Greetings.defaultProps ={
    mark: '!'
};

export default Greetings;

💡onClick과 같은 함수형 타입의 props를 넣어줘야 하는 경우

//App.tsx
import React from 'react';
import Greetings from './Greetings'

const App: React.FC = () => {
  const onClick =(name:string) => {
    console.log(name);
  }
  return (
    <Greetings name='리액트' onClick={onClick}/>
  );
}

export default App;


// Greetings.tsx
import React from 'react';

type GreetingsProps = {
    name: string;
    mark: string;
    optional?: string;
    onClick: (name: string) => void;
};

function Greetings ({name, mark, optional, onClick }: GreetingsProps) {
    const handleClick = () => onClick(name);
    return <div>
        Hello, {name} {mark}
        {optional && <p>{optional}</p>}
        <div>
            <button onClick={handleClick}>Click Me</button>
        </div>
    </div>;
}

Greetings.defaultProps ={
    mark: '!'
};

export default Greetings;

children이 탑재된 것이 장점이 될 수도 있고, 단점이 될 수도있다.
모든 컴포넌트에 children이 모두 들어가 있다면 명료하지가 않게 된다.
컴포넌트 마다 children props가 필요한 경우가 있고 필요한 경우가 없는 경우도 있기 때문이다.

💡만약에 우리가 App.tsx에서 무엇을 빼먹었는지 알 때 ctrl+스페이스바를 누르게 되면 어떤것을 추가해야 하는지도 자동완성식으로 알려준다.