컴포넌트에 Props 전달하기

React 컴포넌트는 서로 소통하기 위해props를 사용합니다. 모든 부모 컴포넌트는 자식 컴포넌트에 props를 제공하여 일부 정보를 전달할 수 있습니다. Props는 HTML 속성을 떠올리게 할 수 있지만, 객체, 배열, 함수를 포함한 모든 JavaScript 값을 통해 전달할 수 있습니다.

익숙한 props

Props는 JSX 태그에 전달하는 정보입니다. 예를 들어,className,src,alt,width, 그리고height는 <img>에 전달할 수 있는 props 중 일부입니다:

<img>태그에 전달할 수 있는 props는 미리 정의되어 있습니다 (ReactDOM은HTML 표준을 따릅니다). 하지만자신만의컴포넌트, 예를 들어<Avatar>에는 어떤 props든 전달하여 커스터마이즈할 수 있습니다. 방법은 다음과 같습니다!

컴포넌트에 props 전달하기

이 코드에서Profile 컴포넌트는 자식 컴포넌트인 Avatar에 어떤 props도 전달하지 않습니다:

두 단계로Avatar에 props를 제공할 수 있습니다.

1단계: 자식 컴포넌트에 props 전달하기

먼저, Avatar에 일부 props를 전달합니다. 예를 들어, 두 개의 props를 전달해 보겠습니다:person (객체)와 size(숫자):

이제 Avatar컴포넌트 내부에서 이러한 props를 읽을 수 있습니다.

2단계: 자식 컴포넌트 내부에서 props 읽기

이름 person, size를 쉼표로 구분하여({와 })안에 나열하면 이러한 props를 읽을 수 있습니다. 이는function Avatar바로 뒤에 위치합니다. 이를 통해 변수처럼 사용하여Avatar코드 내부에서 사용할 수 있습니다.

렌더링을 위해Avatar에 person과 sizeprops를 사용하는 로직을 추가하면 완료됩니다.

이제 다양한 props로Avatar를 여러 다른 방식으로 렌더링하도록 구성할 수 있습니다. 값을 조정해 보세요!

Props를 사용하면 부모와 자식 컴포넌트를 독립적으로 생각할 수 있습니다. 예를 들어,person이나 sizeprops를Profile 내부에서 변경할 때 Avatar가 이를 어떻게 사용하는지 생각할 필요가 없습니다. 마찬가지로,Avatar가 이러한 props를 어떻게 사용하는지 변경할 때Profile을 볼 필요가 없습니다.

Props는 조절할 수 있는 "손잡이"와 같다고 생각할 수 있습니다. 이는 함수의 인수와 동일한 역할을 합니다. 사실, props는 컴포넌트의유일한인수입니다! React 컴포넌트 함수는 단일 인수, 즉props객체를 받습니다:

일반적으로 전체 props객체 자체가 필요하지 않으므로, 개별 props로 구조 분해합니다.

prop에 기본값 지정하기

값이 지정되지 않았을 때 대체할 기본값을 prop에 부여하려면, 구조 분해 시 매개변수 뒤에=와 기본값을 넣어서 수행할 수 있습니다:

이제 <Avatar person={...} />가 sizeprop 없이 렌더링되면,size는 100으로 설정됩니다.

기본값은 sizeprop이 누락되었거나size={undefined}를 전달할 때만 사용됩니다. 하지만size={null}이나size={0}를 전달하면 기본값은사용되지 않습니다.

JSX 전개 구문으로 props 전달하기

때로는 props 전달이 매우 반복적일 수 있습니다:

반복적인 코드는 잘못된 것이 아닙니다. 오히려 더 읽기 쉬울 수 있습니다. 하지만 때로는 간결함을 중시할 수도 있습니다. 일부 컴포넌트는 모든 props를 자식에게 전달합니다. 이Profile이 Avatar에 하는 것처럼 말입니다. props를 직접 사용하지 않기 때문에, 더 간결한 "전개" 구문을 사용하는 것이 합리적일 수 있습니다:

이렇게 하면 각 이름을 나열하지 않고도Profile의 모든 props를Avatar에 전달합니다.

전개 구문은 절제해서 사용하세요.다른 모든 컴포넌트에서 사용한다면 문제가 있을 수 있습니다. 종종 컴포넌트를 분할하고 자식을 JSX로 전달해야 한다는 신호입니다. 다음에 더 자세히 설명하겠습니다!

자식으로 JSX 전달하기

내장된 브라우저 태그를 중첩하는 것은 일반적입니다:

때로는 동일한 방식으로 자신의 컴포넌트를 중첩하고 싶을 것입니다:

JSX 태그 안에 콘텐츠를 중첩하면, 부모 컴포넌트는 그 콘텐츠를children이라는 prop으로 받게 됩니다. 예를 들어, 아래의Card 컴포넌트는 childrenprop을<Avatar />로 설정받아 래퍼 div 안에 렌더링합니다:

내부의 <Avatar>를 <Card>안에서 텍스트로 바꿔보면,Card컴포넌트가 중첩된 콘텐츠를 어떻게 감쌀 수 있는지 확인할 수 있습니다. 내부에서 무엇이 렌더링되는지 "알" 필요가 없습니다. 이 유연한 패턴을 많은 곳에서 볼 수 있을 것입니다.

컴포넌트가 childrenprop을 가진다는 것은 부모 컴포넌트가 임의의 JSX로 "채울" 수 있는 "구멍"이 있다고 생각할 수 있습니다. 시각적 래퍼(패널, 그리드 등)에는childrenprop을 자주 사용하게 될 것입니다.

일러스트:Rachel Lee Nabors

시간에 따라 props가 변하는 방식

아래의Clock컴포넌트는 부모 컴포넌트로부터 두 개의 prop을 받습니다:color와 time. (부모 컴포넌트의 코드는 state를 사용하므로, 아직 다루지 않을 것이기 때문에 생략했습니다.)

아래 선택 상자에서 색상을 변경해 보세요:

이 예시는 컴포넌트가 시간에 따라 다른 props를 받을 수 있다는 점을 보여줍니다. props는 항상 정적이지 않습니다! 여기서timeprop은 매초마다 변하고,colorprop은 다른 색상을 선택할 때 변합니다. props는 컴포넌트의 데이터를 시작 시점뿐만 아니라 어느 시점에서든 반영합니다.

그러나 props는 컴퓨터 과학 용어로 "변경 불가능"을 의미하는불변입니다. 컴포넌트가 props를 변경해야 할 때(예: 사용자 상호작용이나 새로운 데이터에 대한 응답으로), 부모 컴포넌트에게다른 props—새로운 객체!—를 전달해 달라고 "요청"해야 합니다. 그러면 이전 props는 버려지고, 결국 JavaScript 엔진이 그들이 차지한 메모리를 회수하게 됩니다.

"props를 변경"하려고 하지 마세요.사용자 입력에 응답해야 할 때(선택한 색상 변경과 같이), "state를 설정"해야 하며, 이는State: A Component’s Memory에서 배울 수 있습니다.

요약

• props를 전달하려면 HTML 속성과 마찬가지로 JSX에 추가하세요.
• props를 읽으려면function Avatar({ person, size })구조 분해 구문을 사용하세요.
• 누락되었거나 size = 100과 같은 기본값을 지정할 수 있으며, 이는 누락된 props와undefinedprops에 사용됩니다.
• 모든 props는 <Avatar {...props} />JSX 전개 구문으로 전달할 수 있지만, 과도하게 사용하지 마세요!
• 중첩된 JSX(예:<Card><Avatar /></Card>)는 Card컴포넌트의childrenprop으로 나타납니다.
• props는 읽기 전용이며 시간에 따른 스냅샷입니다: 모든 렌더링은 props의 새로운 버전을 받습니다.
• props를 변경할 수 없습니다. 상호작용이 필요할 때는 상태를 설정해야 합니다.