props에 대해 궁금한 점이 있습니다.

우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂

다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다.

function SampleComponent(props) {
  return (
    <div>
      <div>{props.name}</div>
      <div>{props.age}</div>
    </div>
  );
}

만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다.

root.render(
  <React.StrictMode>
    <SampleComponent name={'kim'} age={12} />
  </React.StrictMode>
);

근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어

props.name

props.age

props.university

props.profilePhoto

props.grade

etc...

이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다.

++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다.

function SampleComponent({name, age}) {
  return (
    <div>
      <div>{name}</div>
      <div>{age}</div>
    </div>
  );
}

그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요?

function SampleComponent({children, name, age}) {
  return (
    <div>
      <div>{name}</div>
      <div>{age}</div>
      <div>{children}</div>
    </div>
  );
}

또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다.

function SampleComponent(props) {
  return (
    <div>
      <div>{props.name}</div>
      <div>{props.age}</div>
    </div>
  );
}