props의 개념

Props(프로퍼티)는 React 컴포넌트 간에 데이터를 전달하는 메커니즘입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 여기에는 몇 가지 기본 개념이 있습니다.

Props의 개념:
프로퍼티(Props): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미합니다. 부모가 자식에게 정보를 넘겨주는 매개체 역할을 합니다.

읽기 전용(Read-only): Props는 컴포넌트 내에서 읽기 전용이기 때문에 자식 컴포넌트에서 직접 수정할 수 없습니다.

자식에서 부모로의 역전파 불가능: Props는 단방향 흐름을 가지기 때문에 자식이 부모로 데이터를 직접 변경할 수 없습니다.

사용 방법:
Props 전달:

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 JSX에서 속성으로 값을 넘겨줍니다.

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const name = 'John';
  const age = 25;

  return <ChildComponent name={name} age={age} />;
};

// 자식 컴포넌트
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
};

export default ChildComponent;