[React / ts] props 사용해보기

React에서 props는 컴포넌트 간에 데이터를 전달하는 속성(properties)이다.

부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하며, 함수의 매개변수처럼 작동한다.

 

import React from "react";

interface MyProps {
  weather: string;
}

const MyWeather: React.FC<MyProps> = (props) => {
  return <div>오늘의 날씨는 {props.weather}입니다.</div>;
};

export default MyWeather;

타입스크립트에서는 다음과 같이 props를 사용할 수 있다.

MyProps라는 인터페이스를 생성한 뒤, MyWeather의 타입인 React.FC에 <MyProps>를 추가하여

MyWeather이라는 컴포넌트가 MyProps라는 타입의 props를 필요로 한다는 것을 알 수 있다.

 

그리고 이제 MyWeather에서는 인자로 들어온 props의 정보를 자유롭게 사용할 수 있다.

 

import "./App.css";
import MyWeather from "./MyWeather";

function App() {
  return (
    <div className="container">
      <MyWeather/>
    </div>
  );
}

export default App;

MyWeather를 다른 파일에서 import하여 위와 같이 사용하려고 하면 에러가 발생한다.

weather' 속성이 '{}' 형식에 없지만 'MyProps' 형식에서 필수입니다. 라는 에러이다.

MyWeahter은 MyProps를 props로 받을 것을 기대하고 있는데, 이를 전달해주지 않았기 때문에 위 에러가 발생한다.

 

import "./App.css";
import MyWeather from "./MyWeather";


function App() {
  return (
    <div className="container">
      <MyWeather weather="흐림" />
    </div>
  );
}

export default App;

새롭게 weather="흐림"을 추가하여 주면 에러가 발생하지 않고 정상 작동하는 것을 확인할 수 있다.

 

import React from "react";

interface MyProps {
  weather: string;
  children: React.ReactNode;
}

const MyWeather: React.FC<MyProps> = ({ children, weather }) => {
  return (
    <div>
      {children}
      <p></p>
      오늘의 날씨는 {weather}입니다.
    </div>
  );
};

export default MyWeather;

단순한 string뿐만 아니라 React.ReactNode와 같은 컴포넌트도 props로 사용이 가능하다.

또한 props 자리에 {children, weather}과 같이 작성을 하고 밑의 코드에서 props. 을 붙이지 않고 사용할 수도 있다.