React 요약 2 - 컴포넌트와 Props

함수형 컴포넌트

// 기본 함수형 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 화살표 함수로 표현
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

// 간결한 형태 (암시적 return)
const Welcome = (props) => <h1>Hello, {props.name}</h1>;

// 사용 예시
<Welcome name="Sara" />

코멘트: 함수형 컴포넌트는 React 16.8 이후 Hooks의 도입으로 클래스 컴포넌트보다 더 선호됩니다. 코드가 간결하고 이해하기 쉬우며, 성능 최적화에도 유리합니다.

Props

Props는 컴포넌트에 전달되는 읽기 전용 데이터입니다.

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

// 자식 컴포넌트
function Welcome(props) {
  // props는 객체 형태: { name: "Sara", age: 25, isAdmin: true }
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <p>Age: {props.age}</p>
      {props.isAdmin && <p>Admin user</p>}
    </div>
  );
}

코멘트: Props는 읽기 전용이며 수정할 수 없습니다(불변성). 컴포넌트는 전달받은 props를 수정해서는 안 됩니다. 필요하다면 새로운 값을 계산하여 사용해야 합니다.

Props 구조 분해 할당

// 구조 분해 할당으로 더 깔끔하게 사용
function Welcome({ name, age, isAdmin }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>Age: {age}</p>
      {isAdmin && <p>Admin user</p>}
    </div>
  );
}

코멘트: 구조 분해 할당을 사용하면 코드가 더 간결해지고 가독성이 향상됩니다.

기본 Props 값 설정

function Welcome({ name = "Guest", age = 0, isAdmin = false }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>Age: {age}</p>
      {isAdmin && <p>Admin user</p>}
    </div>
  );
}

// 또는 defaultProps 사용 (레거시 방식)
Welcome.defaultProps = {
  name: "Guest",
  age: 0,
  isAdmin: false
};

코멘트: 기본값을 설정하면 props가 전달되지 않았을 때 오류를 방지할 수 있습니다. 최신 React에서는 함수 매개변수의 기본값을 사용하는 것이 권장됩니다.

children Props

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

// 사용 예시
function App() {
  return (
    <Card title="Welcome">
      <p>This is some content inside the card.</p>
      <button>Click me</button>
    </Card>
  );
}

코멘트: children props를 사용하면 컴포넌트 사이에 다른 컴포넌트나 JSX를 넣을 수 있어 유연한 컴포넌트 구성이 가능합니다. 이는 레이아웃 컴포넌트나 래퍼 컴포넌트를 만들 때 특히 유용합니다.