React 공식문서 - Passing Props to a Component

React 컴포넌트는 props를 이용해서 서로 통신하고, props는 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있다.

---

Familiar props(친숙한 props)

 

props는 JSX 태그에 전달하는 정보다. ReactDOM은 HTML 표준을 준수하기 때문에, HTML 태그의 경우 전달할 수 있는 props는 미리 정의되어 있다.

---

Passing props to a component(컴포넌트에 props 전달하기)

 

Step 1: Pass props to the child component(자식 컴포넌트에 props 전달하기)

 

부모 컴포넌트에서 자식 컴포넌트로 props 전달하기

// Avatar 컴포넌트에 person(객체)와 size(숫자)를 props로 전달
export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

 

---

Step 2: Read props inside the child component(자식 컴포넌트 내부에서 props 읽기)

 

자식 컴포넌트 내부에서 props 읽기

 

자식 컴포넌트 내에서 변수를 사용하는 것처럼 props를 사용할 수 있으며, React 컴포넌트 함수는 props라는 하나의 인자 즉, 객체를 받기 때문에 보통 개별 props로 구조분해 한다.

// person과 size를 쉼표로 구분함으로써 읽을 수 있다.
function Avatar({ person, size }) {
  // person and size are available here
}

---

Specifying a default value for a prop(prop의 기본값 지정하기)

 

값이 지정되지 않았을 때, prop에 기본값을 주고 싶다면, 변수 바로 뒤에 =과 함께 기본값을 넣어 구조 분해 할당할 수 있다.

function Avatar({person, size = 100)} {
  //...
}
// size prop이 없이 렌더링되면 size는 100으로 설정된다

기본값은 size prop이 없거나 size={undefined}로 전달될 때 사용된다.(size={null} 또는 size={0}으로 전달된 경우 기본값은 사용되지 않음)

---

Forwarding props with the JSX spread syntax(JSX 전개 구문으로 props 전달하기)

 

props는 때때로 반복적일 수가 있다.

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

 

반복적인 코드는 가독성을 높일 수 있기 때문에 잘못된 것은 아니지만, 간결하게 표현하기 위해서는 전개(spread) 구문을 사용할 수 있다.

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

 

* 모든 컴포넌트에 전개 구문을 사용한다면 문제가 있는 것이며, 전개 구문은 제한적으로 사용해야 한다.

---

Passing JSX as children(자식을 JSX로 전달하기)

 

JSX 태그 내에 콘텐츠를 중첩하면, 부모 컴포넌트는 해당 컨텐츠를 children이라는 prop으로 받게 된다. children을 가지고 있는 컴포넌트는 부모 컴포넌트가 임의의 JSX로 채울 수 있는 구멍을 가진 것이라고 생각할 수 있다.(패널, 그리드 등의 시각적 래퍼에 종종 children prop을 사용한다.)

 

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

// Card 컴포넌트는 부모 컴포넌트(Profile)가 채울 수 있는 구멍을 가진 것이다
export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

---

How props change over time(시간에 따라 props가 변하는 방식)

 

컴포넌트가 props를 변경해야 하는 경우(예를들어, 사용자의 상호작용이나 새로운 데이터에 대한 응답으로), 부모 컴포넌트에 다른 props, 즉 새로운 객체를 전달하도록 요청해야하는데, 이때 이전의 props는 버려지고(참조를 끊는다) JavaScript 엔진에 의해 메모리 회수(가비지 컬렉팅)가 된다.

 

따라서, props 변경을 시도하지 않고, 사용자의 입력에 반응해야 하는 경우에는 set state가 필요하다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)