컴포넌트와 Props

컴포넌트의 종류

1. 함수형 컴포넌트

function Welcome(props) {
  return <h1>안녕하세요, {props.name}</h1>;
}

// 화살표 함수로도 작성 가능
const Welcome = (props) => {
  return <h1>안녕하세요, {props.name}</h1>;
};

2. 클래스형 컴포넌트

레거시 코드에서 볼 수 있는 형태로, 현재는 함수형 컴포넌트를 권장합니다.

class Welcome extends React.Component {
  render() {
    return <h1>안녕하세요, {this.props.name}</h1>;
  }
}

Props의 특징과 사용법

Props 전달하기

// 부모 컴포넌트
function App() {
  return <Welcome name="Sara" age={25} isStudent={true} />;
}

// 자식 컴포넌트
function Welcome(props) {
  return (
    <div>
      <h1>안녕하세요, {props.name}</h1>
      <p>나이: {props.age}</p>
      <p>학생여부: {props.isStudent ? '예' : '아니오'}</p>
    </div>
  );
}

Props 구조분해할당

function Welcome({ name, age, isStudent }) {
  return (
    <div>
      <h1>안녕하세요, {name}</h1>
      <p>나이: {age}</p>
      <p>학생여부: {isStudent ? '예' : '아니오'}</p>
    </div>
  );
}

컴포넌트 합성

function Welcome(props) {
  return <h1>안녕하세요, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

children props

컴포넌트의 여는 태그와 닫는 태그 사이의 내용을 전달받을 수 있습니다.

function Card({ children, title }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">
        {children}
      </div>
    </div>
  );
}

// 사용 예시
function App() {
  return (
    <Card title="환영합니다">
      <p>이것은 카드의 내용입니다.</p>
      <button>자세히 보기</button>
    </Card>
  );
}

Props 검증

PropTypes를 사용하여 컴포넌트에 전달되는 props의 타입을 검증할 수 있습니다.

import PropTypes from 'prop-types';

function Welcome(props) {
  return <h1>안녕하세요, {props.name}</h1>;
}

Welcome.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isStudent: PropTypes.bool
};