타입스크립트 리액트 기본

타입스크립트 리액트 만들기

npx create-react-app (만들 타입스크립트 리액트 파일 이름) --template typescript

인사말 쓰기

App.tsx
import "./App.css";
import {Greet} from './components/Greet'
// Greet라는 컴포넌트를 쓰기 위해 import

function App() {
  return <div className="App">
    <Greet name='안녕'/>
    {/* 안녕이라는 말을 보내고 싶다. */}
  </div>;
}

export default App;

Greet.tsx
type GreetProps ={
    name:string
}
// Props의 type을 정해주기 위해 GreetProps를 정해준다.

export const Greet=(props:GreetProps)=>{
    // props부분에 위에 지정해준 GreetProps를 넣어준다.
    return(
        <div>
            <h2>{props.name}</h2>
            {/* 위에서 지정해준 name을 써준다. */}
        </div>
    )
}