리액트 props

Props(프롭스)

매개변수랑 비슷한 개념인데, 넘겨준 다는 거야.
함수도 넘겨줄 수 있고, 변수도 넘겨줄 수 있어.

예를 들어,

import React from "react";

interface MyProps {
    weather : string;
}


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

    )
}

export default MyWeather

이런 코드가 있다고 할때,

하나하나 다 뜯어 보면

import React from "react";

React 라이브러리를 가져오는 부분이에요. TypeScript에서 React.FC 같은 타입을 사용하려면 필요해.

2. Props 타입 정의

interface MyProps {
    weather : string;
}

interface란?

TypeScript에서 객체의 구조를 정의하는 방법이에요
"이 컴포넌트는 어떤 데이터를 받을 건지" 미리 약속하는 거예요

해석:

MyProps라는 이름의 타입을 만들었어요
이 컴포넌트는 weather라는 이름의 props를 받을 거예요
weather는 반드시 string (문자열) 타입이어야 해요

왜 타입을 정의할까?

// 잘못된 사용 - 에러 발생!
<MyWeather weather={123} />  // ❌ 숫자는 안 돼요!

// 올바른 사용
<MyWeather weather="맑음" />  // ✅ 문자열만 가능!

3. 컴포넌트 선언

const MyWeather : React.FC<MyProps> = (props) => {

이 한 줄을 나눠서 볼게요

3-1. const MyWeather

컴포넌트 이름을 MyWeather로 정했어요
const로 선언했으니 변경할 수 없는 상수예요

3-2. : React.FC

React.FC: Function Component의 줄임말이에요
"이건 React 함수형 컴포넌트야!" 라고 TypeScript에게 알려주는 거예요
: 이 컴포넌트가 받을 props의 타입을 지정해요

3-3. = (props) => {

화살표 함수로 컴포넌트를 만들어요
props라는 매개변수로 부모 컴포넌트에서 전달받은 데이터를 받아요

4. JSX 반환

return (
    <div>
        오늘의 날씨는 {props.weather} 입니다.
    </div>
)

props.weather로 받은 날씨 데이터를 화면에 보여줘요

import MyWeather from './MyWeather';

function App() {
  return (
      <div>
          <MyWeather weather="맑음" />
          <MyWeather weather="흐림" />
          <MyWeather weather="비" />
      </div>
  );
}

화면에 표시되는 결과:

오늘의 날씨는 맑음 입니다.
오늘의 날씨는 흐림 입니다.
오늘의 날씨는 비 입니다.

🎯 TypeScript를 사용하는 이유

1. 타입 안정성

// JavaScript (에러를 실행해야 알 수 있음)
<MyWeather weather={123} />  // 실행하면 오류!

// TypeScript (코드 작성 중에 바로 알려줌)
<MyWeather weather={123} />  // ❌ 빨간 줄로 에러 표시!

2. 자동완성 지원

VS Code에서 props.을 입력하면 weather가 자동으로 나와요
오타를 방지할 수 있어요

3. 코드 가독성

interface를 보면 "아, 이 컴포넌트는 weather를 받는구나!" 바로 알 수 있어요

💡 개선할 수 있는 점

1. React.FC 대신 일반 함수형 컴포넌트

// 요즘은 이 방식을 더 많이 써요
const MyWeather = ({ weather }: MyProps) => {
  return (
      <div>
          오늘의 날씨는 {weather} 입니다.
      </div>
  )
}

장점:

더 간결해요
props.weather 대신 weather로 바로 사용 (구조 분해 할당)