Typescript로 react 컴포넌트 작성하기

Typescript로 react 컴포넌트 작성하기

typescript를 사용하는것과 pure react를 사용할때, 작성법은 배우 비슷하다. 최상위 컴포넌트 app.tsx와 그 하위 컴포넌트인 greeting.tsx를 사용하여 간단한것을 렌더링 해보자

App.tsx

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

function App() {   // arrow function도 가능하다.
  const onClick = (name: string) => {
    console.log(`${name} says hello`);
  };
  return (
    <Greetings name="DL" onClick={onClick} />
  )
}

export default App;

greeting.tsx

import React from 'react';

interface GreetingsProps {   // props 타입 지정하기
  name: string;
  mark: string;
  optional?: string;    // ?는 props로 있어도 되고, 없어도된다.
  onClick : (name: string) => void; // 리턴값이 없는경우 void로 지정한다.
};

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

Greetings.defaultProps = { // props.mark 의 default값
  mark: '!'
};
//
export default Greetings;