[Vite + React] props와 state

props란?

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말한다.

이 데이터는 자식 컴포넌트에서 변경할 수 없다. (읽기 전용)

state란?

컴포넌트 내부에서 관리되는 데이터로, 변경이 가능하다

 

사용법

JS

1. Parent.js 부모 → 자식 : props 전달
2. import Child from './Child'; const Parent = () => { return <Child message="Hello, World!" />; };
3. Child.js 자식 : 전달받은 props 사용
   • 함수형 컴포넌트

   const MyComponent = (props) => {
     return <div>{props.message}</div>;
   };
   

   • 구조 분해 할당

   const MyComponent = ({ message }) => {
     return <div>{message}</div>;
   };
   

   • 기본값 설정하기

   const MyComponent = ({ message }) => {
     return <div>{message}</div>;
   };
   
   MyComponent.defaultProps = {
     message: 'Default Message',
   };
   

   • PropTypes 사용하기→ 컴파일 타임에 타입 페크를 사용 → 런타임 오류 줄이기 가능~
   • 이 내용을 타입스크립트를 사용하면 타입스크립트의 타입 시스템을 통해 타입을 검사한다.

   import PropTypes from 'prop-types';
   
   const MyComponent = ({ title }) => {
     return <div>{title}</div>;
   };
   
   MyComponent.propTypes = {
     title: PropTypes.string.isRequired,
   };
   

 

TS

타입스크립트에서는 props의 타입을 인터페이스나 타입 별칭을 사용하여 정의할 수 있다.

선택적 props는 ?를 사용하여 정의

• 인터페이스

import React from 'react';

interface MyComponentProps {
  title: string;        // 필수 prop
  subtitle?: string;    // 선택적 prop
}

const MyComponent: React.FC<MyComponentProps> = ({ title, subtitle }) => {
  return (
    <div>
      <h1>{title}</h1>
      {subtitle && <h2>{subtitle}</h2>}
    </div>
  );
};

// 사용 예시
const App = () => {
  return <MyComponent title="Hello, World!" subtitle="Welcome to TypeScript" />;
};

• 타입 별칭

import React from 'react';

type MyComponentProps = {
  title: string;
  subtitle?: string;
};

const MyComponent: React.FC<MyComponentProps> = ({ title, subtitle }) => {
  return (
    <div>
      <h1>{title}</h1>
      {subtitle && <h2>{subtitle}</h2>}
    </div>
  );
};

• 기본값 설정

import React from 'react';

interface MyComponentProps {
  title: string;
  subtitle?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, subtitle = "Default Subtitle" }) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </div>
  );
};