Props(properties)

React에서 props(속성)은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. JavaScript의 함수 인자와 유사하며, 데이터를 전달하여 컴포넌트의 동작 및 모양을 사용자 정의할 수 있게 합니다.

props를 사용하여 다른 부분에서도 사용할 수 있는 재사용 가능한 컴포넌트를 생성하고, 코드를 구성하고 모듈화하는 데 도움이 됩니다. 또한 사용자 상호 작용이나 데이터 변경에 대한 응답으로 업데이트 할 수 있는 동적 컴포넌트를 생성하는 데 사용됩니다.

컴포넌트에 props를 전달하려면, 코드에서 컴포넌트를 사용할 때 속성으로 추가하기만 하면 됩니다. 예를 들어 텍스트와 스타일을 다르게 사용하여 "Button" 컴포넌트를 사용자 정의하려면, 다음과 같이 텍스트와 스타일을 props로 전달할 수 있습니다

예시1

<Button text="Click me!" style={{backgroundColor: 'blue', color: 'white'}} />

위의 예에서 "Button" 컴포넌트는 "text"와 "style" 두 가지 props를 받습니다. 이 props를 사용하여 지정된 텍스트와 스타일로 버튼을 렌더링 할 수 있습니다.

받는 컴포넌트에서는 "props" 객체를 통해 전달 된 props에 액세스할 수 있습니다. 예를 들어, "Button" 컴포넌트에서 전달 된 텍스트를 표시하려면 다음과 같이 액세스합니다:

function Button(props) {
  return <button style={props.style}>{props.text}</button>;
}

이 예제에서 "Button" 컴포넌트는 props를 매개 변수로 (이 경우 "props"로 지정된) 받으며, "props.text" 및 "props.style" 속성을 사용하여 지정된 텍스트와 스타일로 버튼을 렌더링합니다.

예시2

다른예시입니다.

function App() {
  const topics = [
    {id:1, title:'html', body:'html is ....'},
    {id:2, title:'css', body:'css is ....'},
    {id:3, title:'javascript', body:'javascript is ....'},
  ]
  return (
    <div>
      <Header title = "REACT"></Header>
      <Nav topics ={topics}></Nav>
      <Article title = "Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

여기의 컴포넌트가 이해가 안된다면 여기를 클릭 << React 컴포넌트란?
topics라는 배열이 있고 그배열을 Nav 탭에서 컴포넌트로 받아와 list로 출력 하고 있습니다.

function Nav(props){
  const lis = [  ];
  for(let i=0 ; i < props.topics.length ; i++){
    let t = props.topics[i];
    lis.push(<li><a href={"/read/"+t.id} >{t.title}</a></li>);
  }