props

props의 특징

컴포넌트의 속성(property)을 의미합니다

외부로부터 전달받은 값으로 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다
상위 컴포넌트로부터 전달받은 값입니다

props를 함수의 전달인자처럼 전달받아 화면에 표시하는 React 엘리먼트를 반환합니다

따라서 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할수도 있습니다
객체형태입니다

props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다
props는 읽기 전용입니다

props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다

props 전달방식

{/* App.js */}
function App() {
    return (
        <>
            <Test name='kaen'>  // kaen이란 props를 Test.js로 전달
        </>
    )
}

{/* Test.js */}
function Test(props) {
    console.log(props)
    return (
        <>
            My name is {props.name}!  // My name is kaen!
        </>
    )
}

비구조화 할당(구조분해)로 props 전달

function Test({name, age}) {
	return <>{age}</>
}

props.children

부모 컴포넌트 JSX 태그 안에 있는 것들이 자식 컴포넌트에 prop형태로 전달됩니다

// 자식
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children} // prop로 JSX 가져오기
    </div>
  );
}

// 부모
function WelcomeDialog() {
  return (
    <FancyBorder color="blue"> // 여기부터
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p> // 여기까지 prop로 전달
    </FancyBorder>
  );
}