Props

환영 배너용 Greeting 컴포넌트를 만들고 있는데, 로그인한 모든 방문자가 고정된 이름 하나가 아닌 자신의 이름을 봐야 한다고 생각해 봅시다. 고정된 값 하나만 렌더링할 수 있는 컴포넌트로는 이것을 할 수 없습니다. Props(속성의 약자)는 컴포넌트 외부에서 컴포넌트로 데이터를 전달하는 방법입니다. 함수에 인자를 전달하는 것과 같은 방식입니다. Props는 HTML 태그의 속성처럼 컴포넌트에 작성하며, 컴포넌트는 매개변수 하나를 통해 Props를 읽습니다.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>
}
// 사용: <Greeting name="Ada" />

Greeting은 name이라는 prop 하나를 받습니다. React는 <Greeting>에 작성한 모든 속성을 단일 객체로 모아서 그 객체를 컴포넌트의 첫 번째 인자로 전달합니다. 여기서 { name }은 그 객체를 구조 분해하여 name 값을 바로 꺼내는 것입니다. <Greeting name="Ada" />라고 호출하면 함수 내부에서 name은 "Ada"입니다. 다른 이름으로 다시 호출하면 같은 컴포넌트에서 다른 제목이 나옵니다.

Props는 한 방향으로 흐릅니다. 컴포넌트가 사용되는 곳에서 컴포넌트 내부로 내려갑니다. Greeting 내부에서 name은 일반 변수처럼 동작하지만, 컴포넌트는 이를 변경할 수 없습니다. Props는 읽기 전용입니다. 컴포넌트가 시간에 따라 변하는 데이터가 필요하다면, 그것은 state의 역할이며 몇 장 뒤에서 다룹니다.

기본값

Props가 없을 수 있다면, 함수 매개변수에 기본값을 주는 것처럼 구조 분해 패턴에서 =를 사용해서 기본값을 설정합니다.

function Greeting({ name = 'friend' }) {
  return <h1>Hello, {name}</h1>
}

name prop 없이 <Greeting />을 호출하면 name은 'friend'로 돌아갑니다. name을 전달하면 기본값을 덮어씁니다. 이는 일반적인 JavaScript 기본 매개변수 문법으로, React가 컴포넌트에 전달하는 객체에 적용합니다.

children prop

일부 컴포넌트는 속성을 통해 받는 대신 다른 콘텐츠를 감싸야 합니다. 컴포넌트의 여는 태그와 닫는 태그 사이에 콘텐츠를 작성하면, React는 이를 children이라는 특수 prop으로 자동 전달합니다.

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

// 사용:
// <Card>
//   <p>여기에 오는 모든 것이 Card의 children prop이 됩니다.</p>
// </Card>

children은 다른 prop과 정확히 같게 작동합니다. 같은 구조 분해 매개변수를 통해 읽으며, 컴포넌트가 렌더링할 위치를 결정합니다. 유일한 차이는 도착 방식으로, 이름 있는 속성이 아닌 태그의 콘텐츠를 통해 전달됩니다.

모든 JavaScript 값 전달하기

Prop은 숫자, 불린, 객체, 배열, 심지어 함수까지 모든 JavaScript 값을 가질 수 있습니다. 따옴표 대신 중괄호로 값을 감싸세요.

function UserCard({ user, onSelect }) {
  return <button onClick={() => onSelect(user.id)}>{user.name}</button>
}

// 사용: <UserCard user={{ id: 1, name: 'Ada' }} onSelect={handleSelect} />

여기서 user는 객체이고, onSelect는 컴포넌트가 호출할 수 있도록 전달된 함수입니다. 버튼의 onClick은 누군가 클릭할 때 onSelect를 실행합니다. 이는 다음 Events 장에서 전체적으로 다루는 이벤트 핸들러입니다. 지금은 그대로 받아들이세요. 이것이 컴포넌트가 통신하는 방식입니다. 데이터는 Props를 통해 아래로 흐르고, 동작도 같은 방식으로 흐르며, 자식이 호출할 수 있는 함수로 전달됩니다.

단방향 데이터 흐름

Props는 의도적으로 컴포넌트 트리 아래로 흐릅니다. 부모가 자식에게 데이터를 전달하고, 그 자식은 더 아래로 전달할 수 있으며, Props를 통해 위로 흐르는 것은 없습니다. 컴포넌트는 자신의 Props 객체에 쓰거나 Props를 통해 받은 객체나 배열을 변경해서는 안 됩니다. 전달받은 모든 것을 고정된 것으로 취급하세요.

이 제약은 렌더링을 예측 가능하게 유지합니다. 어딘가의 state가 변경되고 React가 영향을 받는 컴포넌트를 다시 렌더링할 때, 각 렌더는 그 컴포넌트의 현재 Props와 state에서 JSX를 다시 계산합니다. 컴포넌트가 부모가 전달한 Props에 도달해서 변경할 수 있다면, 부모는 자신의 데이터에 대한 신뢰할 수 있는 그림을 잃게 되고, 버그를 추적하는 것은 값이 실제로 변경된 한 곳이 아니라 값이 통과한 모든 자식을 확인해야 한다는 의미입니다. Props를 읽기 전용으로 유지하면 추적 가능합니다. UI의 모든 값은 정확히 한 곳에서 설정됩니다.

Props는 컴포넌트 외부에서 컴포넌트로 데이터를 가져옵니다. 몇 장 뒤에 state에서는 컴포넌트가 시간에 따라 자신의 데이터를 어떻게 유지하고 업데이트하는지 다룹니다.

JunoProps는 읽기 전용입니다 Props는 컴포넌트를 사용하는 누군가로부터 컴포넌트가 받는 정보입니다. 함수에 인자를 전달하는 것과 같습니다. { name }처럼 구조 분해 매개변수에서 읽으며, 컴포넌트는 전달받은 Props를 변경하지 않습니다. 없을 수 있는 것에는 =로 기본값을 주고, 컴포넌트의 태그 사이에 넣은 모든 것은 children prop으로 전달된다는 것을 기억하세요.

JunoProps는 읽기 전용입니다 Props는 컴포넌트의 입력입니다. 매개변수에서 구조 분해하여 읽고, 없을 수 있는 것들에 기본값을 설정하고, children을 속성 대신 태그의 콘텐츠를 통해 전달되는 또 다른 prop으로 취급하세요. 문자열, 객체, 함수 등 무엇이든 가질 수 있으므로 이를 사용해서 데이터와 동작을 함께 전달합니다. 전달받은 것을 변경하지 마세요. Props는 읽기 전용으로 유지됩니다.

JunoProps는 읽기 전용입니다 Props는 데이터를 한 방향으로, 트리 아래로 전달하며, 이 방향은 중요합니다. 자신의 Props를 변경하는 컴포넌트는 렌더링이 알려진 입력을 반영한다는 보장을 깹니다. 기본 매개변수와 children은 일반 객체 위에 계층화된 일반 JavaScript와 JSX 문법입니다. 컴포넌트 쪽에서 Props를 불변으로 유지하면 렌더링은 예측 가능하게 유지되며, 이는 React의 다른 곳에서 모두 의존하고 있는 속성입니다.

다음: Lists and keys, 여기서는 하나의 컴포넌트가 전체 배열 데이터를 렌더링합니다.