React.ReactNode type

얘만 다른데 얘는 어떻게 넣어야할까 고민했다.

 

import React from "react";
import Highlight from "../PetInfo/Highlight";

interface CardType {
  title: string;
  subTitle: string;
}

const WeatherCard = ({ title, subTitle }: CardType) => {
  return (
    <div className="flex justify-between w-1/2 h-full p-4 bg-grayColor-100 rounded-xl">
      <div className="flex flex-col justify-between ">
        <div className="text-2xl">
          <div className="text-lg">{title}</div>
          <Highlight content={subTitle} />
        </div>

        {/* 이 아이는 어떻게 해야할까?
        
        <div className="text-sm ">
          <span className="mr-2">
            최저 <Highlight content="21°" />
          </span>
          <span>
            최고 <Highlight content="28°" />
          </span>
        </div> */}
      </div>
      <div className="flex items-end ">
        <div className="p-5 bg-grayColor-200 rounded-lg">img</div>
      </div>
    </div>
  );
};

export default WeatherCard;

const Walk = () => {
  return <WeatherCard title="산책 지수" subTitle="좋음" />;
};

const Weather = () => {
  return <WeatherCard title="오늘의 날씨" subTitle="22° 흐림" />;
};

 

addition을 하나 더 넣어야겠다고 생각했다. 

 

근데 여기서 타입은 어떻게 되고, 나중에 넣을 땐 어떻게 넣어야할 지 모르겠다.

일단,

import React from "react";
import Highlight from "../PetInfo/Highlight";

const Temperatures = () => {
  return (
    <div className="text-sm ">
      <span className="mr-2">
        최저 <Highlight content="21°" />
      </span>
      <span>
        최고 <Highlight content="28°" />
      </span>
    </div>
  );
};

export default Temperatures;

 

이렇게 컴포넌트를 만들어주고 넣어보자.

 

JSX의 경우, type을 일반적으로React.ReactNode 을 사용한다.

import React from "react";
import Highlight from "../PetInfo/Highlight";

interface CardType {
  title: string;
  subTitle: string;
  addition?: React.ReactNode;
}

const WeatherCard = ({ title, subTitle, addition }: CardType) => {
  return (
    <div className="flex justify-between w-1/2 h-full p-4 bg-grayColor-100 rounded-xl">
      <div className="flex flex-col justify-between ">
        <div className="text-2xl">
          <div className="text-lg">{title}</div>
          <Highlight content={subTitle} />
        </div>
        {addition}
      </div>
      <div className="flex items-end ">
        <div className="p-5 bg-grayColor-200 rounded-lg">img</div>
      </div>
    </div>
  );
};

export default WeatherCard;

const Weather = () => {
  return <WeatherCard title="오늘의 날씨" subTitle="22° 흐림" addition={<Temperatures />} />;
};