React 컴포넌트 속성 props

// import logo from './logo.svg';
import './App.css';

// 사용자 태그 정의하기 (사용자 정의 태그 = 컴포넌트)
function Header(props){
  console.log('props',props,props.title)
  return <header>
    <h1><a href ="/">{props.title}</a></h1>
  </header>
}

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

function Article(props){
  console.log('props',props,props.title,props.body)
  return <article>
  <h2>{props.title}</h2>
  {props.body}
</article>
}

function App() {
   // props 속성을 줘서 그 프로세스를 주입된 값에 따라 li가 만들어지게 하는 방법
   const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'javascript', body:'javscript is...'}
  ]
  return (
    <div className = "App">
      {/* home 으로 이동하는 헤더 영역 */}
      <Header title="REACT"></Header>
      {/* Nav 컴포넌트에 전달된 topics="topics"는 문자열이 전달됨 -> topics={topics} 데이터 있는 그대로 전달됨 */}
      <Nav topics={topics}></Nav>
      {/* 언제나 똑같이 구현되는것이 아니라 article 추가하여 title 과 body 속성 내용이 바뀌면 그에 따라 내용이 유동적으로 변함 */}
      <Article title="welcome" body="Hello, React"></Article>
      <Article title="Hello" body="Welcome, React"></Article>
    </div>
  );
}

export default App;

 

 

React에서 컴포넌트의 속성(props)은 컴포넌트에 전달되는 데이터입니다. Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방법을 제공하며, 컴포넌트를 재사용하고 유지 보수하기 쉽게 만들어 줍니다. Props는 읽기 전용이며, 컴포넌트 내에서 수정할 수 없습니다.

Props의 기본 사용법

1. 데이터 전달하기: 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때, 자식 컴포넌트의 태그에 속성 형태로 데이터를 추가합니다.

    <ChildComponent someProp="value" anotherProp={someValue} />

2. 데이터 사용하기: 자식 컴포넌트에서는 `props` 객체를 통해 전달받은 데이터에 접근할 수 있습니다. 함수 컴포넌트의 경우, 매개변수로 `props`를 받아 사용할 수 있습니다.

    function ChildComponent(props) {
      return <div>{props.someProp}</div>;
    }

 Props의 특징
- 읽기 전용(Read-Only): 컴포넌트 내부에서 props의 값을 변경하려고 시도하면 오류가 발생합니다. React는 데이터의 흐름이 한 방향(부모에서 자식으로)으로 유지되어야 한다는 원칙을 따릅니다.
- 재사용성(Reusability): 같은 컴포넌트를 다양한 props와 함께 여러 번 사용하여, 재사용 가능한 UI 구성요소를 만들 수 있습니다.
- 구조 분해 할당(Destructuring Assignment): 함수 컴포넌트에서는 구조 분해 할당을 사용하여 props 객체에서 필요한 값을 직접 추출할 수 있습니다.
 

    function ChildComponent({ someProp, anotherProp }) {
      return (
        <div>
          <p>{someProp}</p>
          <p>{anotherProp}</p>
        </div>
      );
    }

 Props와 자식 컴포넌트
자식 컴포넌트는 `props.children`을 사용하여 부모 컴포넌트에서 전달된 내용을 렌더링할 수 있습니다.

이는 컴포넌트 사이의 콘텐츠를 삽입하는 데 사용됩니다.

function ParentComponent(props) {
  return <div>{props.children}</div>;
}

function App() {
  return (
    <ParentComponent>
      <p>이것은 자식 컴포넌트입니다.</p>
    </ParentComponent>
  );
}