[Typescript] React props 사용하기

타입스크립트로 리액트 코드를 작성하던 도중 props의 사용법이 달라서 작성하게되었다.

기존 자바스크립트의 경우 컴포넌트에서 파라미터로 props를 받으면 됐었지만 타입스크립트에서는 그렇게 하면 동작하질 않는다

부모컴포넌트

import React from 'react';
import './App.css';
import Todos from './components/Todos';

const App = () => {
	return <div>
        <Todos items={['리액트 공부하기', '타입스크립트 공부하기']}/>
    </div>;
}

export default App;

자식컴포넌트

import React from 'react';

const Todos: React.FC<{ items: string[] }> = (props) => {
	return (
		<ul>
			{props.items.map((item) => (
				<li key={item}>{item}</li>
			))}
		</ul>
	);
};

export default Todos;

자식 컴포넌트에서 타입을 React.FC로 선언후 타입에 제네릭으로 부모컴포넌트에서 선언한 props를 객체로 선언한다. (props가 객체형태이므로)

React.FC에 대해선 사용을 지양해야 한다고하는데 아직까지는 크게 와닿지 않는다.