generic, FC, props

import React, { FC } from 'react';
import logo from './logo.svg';
import './App.css';


interface ButtonProps{
  children?: React.ReactNode;
  width:number;
  onClick?:()=>void;
}

const Button:FC<ButtonProps>=(props)=>{
  // ButtonProps = generic type
  const { children, width, onClick } = props;
  // -> children = props.children ;
  return (
    <button
    style={{
      width:`${width}px`,
      height:'30px',
      display:'flex',
      justifyContent:'center',
    }}
    onClick={onClick}
    >
      {children}
    </button>
  )
}
export { Button }


function App() {
  function alarm(){
    alert('Hi!');
  }
  return (
    <div>
      <Button width = {500} onClick={alarm}>
        <div>this is button</div>
      </Button>
    </div>
  );
}

export default App;

1. FC type
   const Button:FC<ButtonProps>
   FC = Function Component 타입이다.

react에선 component 또한, 함수 혹은 class이므로 값으로써 전달 될 수 있기 때문에 type을 설정해주어야 한다.

2. const { children, width, onClick } = props;

props 구조분해 문법을 사용한 것이다.

const children = props.children;
const width = props.width;
const onClick = props.onClick;

와 동일하다

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example

https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype