React - 공식문서[1-5] 컴포넌트에 props 전달하기

React 공식문서의 "컴포넌트에 props 전달하기 부분"에서 중요 내용이나 처음 안 부분을 정리해볼 예정이다.

 

 

1. {...props}

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} /> // 받은 props를 그대로 넘김(ES6의 객체 스프레드가아님)
      <Avatar props /> // 잘못된 코드 : props라는 이름의 boolean값을 ture로 넘겨줌
      <Avatar {props} /> //에러 : 잘못된 행동 어떤 프로퍼티에 할당을 해줘야하는데 그냥 값을 넣어서 오류
    </div>
  );
}

{...props}로 객체 스프레드를 이용해 새로운 객체가 넘어가는 것이아닌 props객체 그대로 넘어가게된다.

Spread Operator로 복사한 객체(배열)은 1depth의 값에서만 깊은 복사를 실행한다.

https://velog.io/@yukyung/Spread-Operator%EB%8A%94-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%9D%BC%EA%B9%8C-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%9D%BC%EA%B9%8C

 

 

2. children을 사용하자.

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

<Card> 내부의 <Avatar>를 텍스트로 바꾸어 <Card> 컴포넌트가 중첩된 콘텐츠를 어떻게 감싸는지 확인해 보세요. <Card>는 children 내부에서 무엇이 렌더링되는지 “알아야 할” 필요가 없습니다.
이 유연한 패턴은 많은 곳에서 볼 수 있습니다.

-  children을 사용하지 않으면 불필요한 prop drilling으로 컴포넌트가 재랜데렁이 일어나게 된다.

 

 

3.  props는 불변!

export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}

위 처럼 time이 실시간으로 바뀌는 상황에서 clock 컴포넌트는 계속해서 바뀌는 time을 받는다.

이 예시는 컴포넌트가 시간에 따라 다른 props를 받을 수 있음을 보여줍니다.

Props는 항상 고정되어 있지 않습니다!

여기서 time prop은 매초마다 변경되고, color prop은 다른 색상을 선택하면 변경됩니다.

Props는 컴포넌트의 데이터를 처음에만 반영하는 것이 아니라 모든 시점에 반영합니다.

 

그러나 props는 불변으로, 컴퓨터 과학에서 “변경할 수 없다”는 뜻의 용어입니다.

컴포넌트가 props를 변경해야 하는 경우(예: 사용자의 상호작용이나 새로운 데이터에 대한 응답으로),

부모 컴포넌트에 다른 props, 즉,새로운 객체를 전달하도록 “요청”해야 합니다!

그러면 이전의 props는 버려지고(참조를 끊는다),

결국 JavaScript 엔진은 기존 props가 차지했던 메모리를 회수(가비지 컬렉팅. GC)하게 됩니다.