react + Typescript tutorial

프로젝트 조원분이 추천해주신 Ts 인강! 듣고 정리한 내용..
https://www.youtube.com/watch?v=TiSGujM22OI&list=PLC3y8-rFHvwi1AXijGTKM0BKtHzVC-LSK

src/App.tsx

import "./App.css";
import { Greet } from "./components/Greet";
import { Person } from "./components/Person";
import { PersonList } from "./components/PersonList";
import { Status } from "./components/Status";
import { Heading } from "./components/Heading";
import { Oscar } from "./components/Oscar";
import { Button } from "./components/Button";
 
function App() {
  const personName = {
    first:'Bruce', 
    last: 'Wayne' 
  }

  const nameList = [
    { 
      first: 'Bruce',
      last: 'Wayne'
    },
    {
      first: 'Clark',
      last: 'Kent'
    },
    {
      first: 'Princess',
      last: 'Diana'
    }
  ]
  return <div className="App">
    <Greet name='Vishwas' messageCount={10} isLoggedIn={false} />
    <Person name={personName} />
    <PersonList names={nameList} />
    <Status status='error' />
    <Oscar>
    <Heading>Placeholder text</Heading>
    </Oscar>
    <Button handleClick={() => {
      console.log('Button clicked')
    }} />
  </div>;
}

export default App;

src/components/Greet.tsx

type GreetProps = {
  name: string;
  messageCount?: number;
  isLoggedIn: boolean;
};

export const Greet = (props: GreetProps) => {
  const { messageCount = 0 } = props
  return (
    <div>
      <h2>
        {props.isLoggedIn
         ? `Welcome ${props.name}! You have ${props.messageCount}unread messages`
            :`Welcome Guest`
        }
      </h2>
    </div>
  );
};

src/components/Heading.tsx

type HeadingProps = {
    children: string
}

export const Heading = (props: HeadingProps) => {
    return <h2>{props.children}</h2>
}

src/components/Oscar.tsx

type OscarProps = {
    children: React.ReactNode
}


// what is the type react component? 
//  
export const Oscar = (props:OscarProps  ) => {
    return <div>{props.children}</div>
}

src/components/Person.tsx

type PersonProps = {
    name:{
        first: string
        last: string
    }
}

export const Person = (props:PersonProps) => {
    return <div>Bruce Wayne</div>
}

src/components/PersonList.tsx

type PersonListProps = {
  names: {
    first: string;
    last: string;
  }[];
};

export const PersonList = (props: PersonListProps) => {
  return (
    <div>
      {props.names.map((name) => {
        return (
          <h2 key={name.first}> // key 값을 name.first로 받는이유가 뭘까.. 
            {name.first} {name.last}
          </h2>
        );
      })}
    </div>
  );
};

src/components/Button.tsx

type ButtonProps = {
    handleClick: () => void
    // 어떤 parameter든 return 할 필요 없을 때 
}


// what is the type react component? 
//  
export const Button = (props: ButtonProps) => {
    return <div onClick={props.handleClick}>click</div>
}