props 여러 타입들

number

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

export const Greet=(props:GreetProps)=>{
    // props부분에 위에 지정해준 GreetProps를 넣어준다.
    return(
        <div>
            <h2>
               {props.name} 안 읽은 메세지가 ${props.messageCount}개가 있어
            </h2>
        </div>
    )
}

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

function App() {
  
  return (
    <div className="App">
      <Greet name="안녕" messageCount={20} />
    </div>
  );
}

export default App;

Boolean

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

export const Greet = (props: GreetProps) => {
  // props부분에 위에 지정해준 GreetProps를 넣어준다.
  return (
    <div>
      <h2>
      {/* 삼항연산자 */}
        {props.isLoggedIn
          ? `${props.name} 안 읽은 메세지가 ${props.messageCount}개가 있어.`
          : "Welcome Guest"}
      </h2>
    </div>
  );
};

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

function App() {
  
  return (
    <div className="App">
      <Greet name="안녕" messageCount={20} isLoggedIn={false} />
    </div>
  );
}

export default App;

isLoggined를 true로 바꾸면

객체

Person.tsx
type PersonProps={
    name:{
        first:string
        last:string
    }
}

export const Person=(props: PersonProps)=>{
    return <div>{props.name.first} {props.name.last}</div>
}

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

function App() {
  const personName = {
    first: "강",
    last: "현",
  };
  // 이런 personName을 만들고 보내기

  return (
    <div className="App">
      <Greet name="안녕" messageCount={20} isLoggedIn={true} />
      <Person name={personName} />
    </div>
  );
}

export default App;

배열

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}>
            {name.first} {name.last}
          </h2>
        );
      })}
    </div>
  );
};

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

function App() {
  const personName = {
    first: "강",
    last: "현",
  };
  // 이런 personName을 만들고 보내기

  const nameList = [
    {
      first: "강",
      last: "현",
    },
    {
      first: "강",
      last: "현1",
    },
    {
      first: "강",
      last: "현2",
    },
  ];

  return (
    <div className="App">
      <Greet name="안녕" messageCount={20} isLoggedIn={true} />
      <Person name={personName} />
      <PersonList names={nameList} />
    </div>
  );
}

export default App;

type을 분리해서도 작성 가능

Person.tsx
import { PersonProps } from "./Person.types";

export const Person = (props: PersonProps) => {
  return (
    <div>
      {props.name.first} {props.name.last}
    </div>
  );
};

Person.types.tsx
export type PersonProps = {
  name: {
    first: string;
    last: string;
  };
};
//원래 있던 type 부분을 따로 빼서 사용하는 곳에서 import를 통해 사용 가능

type을 또 나눠서 작성 가능

Person.types.ts
export type Name = {
  first: string;
  last: string;
};
원래 있던 타입들을 위에서 다시 나눠서 작성

export type PersonProps = {
  name: Name;
};
위에 나눈 타입을 그대로 써주면 된다.

PersonList.tsx
import { Name } from "./Person.types";

type PersonListProps = {
  names: Name[];
};
위의 Person.types.ts에 있는 Name을 import해와서 사용

export const PersonList = (props: PersonListProps) => {
  return (
    <div>
      {/* map을 통해 반복을 해준다.name이라는 변수를 만들어주고 */}
      {props.names.map(name => {
        return (
          <h2 key={name.first}>
            {name.first} {name.last}
          </h2>
        );
      })}
    </div>
  );
};