Props 응용

생각한 값들만 props로 전달해야 할 경우

Status.tsx
type StatusProps = {
  status: string;
};

export const Status = (props: StatusProps) => {
  let message;
  if (props.status === "loading") {
    message = "Loading...";
  } else if (props.status === "success") {
    message = "데이터 불러오기 성공";
  } else if (props.status === "error") {
    message = "데이터 불러오는데 에러 발생";
  }

  return (
    <div>
      <h2>Status - {message}</h2>
    </div>
  );
};

App.tsx
import "./App.css";
import { Status } from "./components/Status";

function App() {
  return (
    <div className="App">
      <Status status="loading"></Status>
    </div>
  );
}

export default App;

저 3가지 상태가 아닌 다른 값들을 props로 보내면 아무것도 없는 상태이기 때문에 3가지의 상태만 props로 전달되게 하기

Status.tsx
type StatusProps = {
  status: "loading" | "success" | "error";
};

export const Status = (props: StatusProps) => {
  let message;
  if (props.status === "loading") {
    message = "Loading...";
  } else if (props.status === "success") {
    message = "데이터 불러오기 성공";
  } else if (props.status === "error") {
    message = "데이터 불러오는데 에러 발생";
  }

  return (
    <div>
      <h2>Status - {message}</h2>
    </div>
  );
};

App.tsx
import "./App.css";
import { Status } from "./components/Status";

function App() {
  return (
    <div className="App">
      <Status status="dkdfjdk"></Status>
      이렇게 적으면 빨간줄이 뜨면서 에러가 난다.
    </div>
  );
}

export default App;

children 타입으로 props 전송

Heading.tsx
type HeadingProps = {
  children: string;
};

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

App.tsx
import "./App.css";
import { Heading } from "./components/Heading";
import { Status } from "./components/Status";

function App() {
  return (
    <div className="App">
      <Status status="loading"></Status>
      <Heading>이렇게 컴포넌트로 children 타입을 보낸다.</Heading>
    </div>
  );
}

export default App;

컴포넌트 안에 컴포넌트 넣기

Oscar.tsx
type OscarProps = {
  children: React.ReactNode;
};

export const Oscar = (props: OscarProps) => {
  return <div>{props.children}</div>;
};

App.tsx
import "./App.css";
import { Heading } from "./components/Heading";
import { Oscar } from "./components/Oscar";
import { Status } from "./components/Status";

function App() {
  return (
    <div className="App">
      <Status status="loading"></Status>
      <Heading>이렇게 컴포넌트로 children 타입을 보낸다.</Heading>
      <Oscar>
        <Heading>Oscar는 내꺼다.</Heading>
      </Oscar>
    </div>
  );
}

export default App;

컴포넌트에서 한 타입을 빼고 싶을 때

Greet.tsx
type GreetProps = {
  name: string;
  messageCount?: number;
  // ?를 넣어서 뺄수도 있게 만들어준다.
  isLoggedIn: boolean;
};
// Props의 type을 정해주기 위해 GreetProps를 정해준다.

export const Greet = (props: GreetProps) => {
  // props부분에 위에 지정해준 GreetProps를 넣어준다.
  const { messageCount = 0 } = props;
  // 메시지 수를 이렇게 설정해주고 props라고 설정해주면
  return (
    <div>
      <h2>
        {/* 삼항연산자 */}
        {props.isLoggedIn
          ? `${props.name} 안 읽은 메세지가 ${messageCount}개가 있어.`
          // props.을 안 붙여줄 수 있다.
          : "Welcome Guest"}
      </h2>
    </div>
  );
};

App.tsx
import "./App.css";
import { Greet } from "./components/Greet";
import { Heading } from "./components/Heading";
import { Oscar } from "./components/Oscar";
import { Status } from "./components/Status";

function App() {
  return (
    <div className="App">
      <Status status="loading"></Status>
      <Heading>이렇게 컴포넌트로 children 타입을 보낸다.</Heading>
      <Oscar>
        <Heading>Oscar는 내꺼다.</Heading>
      </Oscar>
      <Greet name="강현" isLoggedIn={false} />
      {/* 원래 Greet 컴포넌트에는 이름, 메세지 갯수, 로그인 여부가 들어가지만
      Greet 컴포넌트에서 messageCount에 ?를 넣어놔서 뺄 수 있도록 만들어줌. */}
    </div>
  );
}

export default App;