11. 컴포넌트 만들기 연습

• React.FC를 사용할 때는 props의 타입을 Generics로 넣어서 사용

• React.FC의 장점
  • props에 기본적으로 children이 들어감?
  • 두번째 컴포넌트의 defaultProps, propTypes, contextTypes 설정시 자동완성
• 단점
  • children이 optional : props 타입이 불명확
  • React.FC보다는 그냥 쓰는 것을 추천

//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;

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

function App() {
  const onClick = (name: string) => {
    console.log(`${name} says hello`)
  }
  return (
    <div className='App'>
      <p>TypeScript 테스트 중...</p>
      <Greetings name="Hello" onClick={onClick}/>
    </div>
  );
}

export default App;