[React.js] API에서 받은 객체를 prop을 이용해 그대로 자식 컴포넌트에 전달? 아니면 선별해서 전달?

만약 API로 데이터가 모인 객체를 전달받아 자식 컴포넌트에 props를 통해 전달해야 한다면,

props를 전달받는 자식 컴포넌트에 필요한 요소만 전달하는게 나을까?

아니면 API로 받는 객체를 통째로 자식 컴포넌트에 보내준 후 자식요소에서 골라 쓰는게 좋을까?

 

첫번째 방법은 중괄호 안의 값이 출처가 불분명해서 자체적으로 선언한 변수인지, prop값인지 구분하기 어려울 것 같다.

개인적으로는 후의 방법이 자식 컴포넌트 입장에서 조금 더 명시적으로 보이는 것 같다.

또한 API 데이터를 자식 컴포넌트에서 여러 용도로 사용할 수도 있기 때문에 확장성 면에서도 첫번째 방법이 나은 것 같다.

다만, 자식 컴포넌트의 용도가 명확하다면 불필요한 데이터를 전달할 필요는 없을 것이다.

 

위 글을 작성하며, prop을 전달하는 과정과 원리가 궁금해졌다.

다른 자바스크립트 파일로 데이터를 전달하는 것인데.. 어떻게 진행되는걸까?

부모 컴포넌트에서 props를 메모리 어딘가에 저장시키고,

자식 컴포넌트에서는 저장된 메모리 주소를 가리키는 것인가..?

시간 날 때 찾아봐야겠다.

 

아래 코드는 자식 컴포넌트에서 props를 전달받는 두 가지 예시.

// 필요한 property만 선별해서 받은 코드
function Movies({props.medium_cover_image, title, summary, genres}) {
  return (
    <div>
      <img src={medium_cover_image} alt="" />
      <h2>{title}</h2>

      <span>{summary}</span>
      <ul>
        {genres.map((g) => {
          return <li key={g}>{g}</li>;
        })}
      </ul>
      <hr />
    </div>
  );
}

// API 객체를 통째로 받아온 코드
function Movies(props) {
  return (
    <div>
      <img src={props.medium_cover_image} alt="" />
      <h2>{props.title}</h2>

      <span>{props.summary}</span>
      <ul>
        {props.genres.map((g) => {
          return <li key={g}>{g}</li>;
        })}
      </ul>
      <hr />
    </div>
  );
}