Props

대부분의 컴포넌트는 생성 시 다양한 매개변수로 커스터마이징할 수 있다. 이렇게 생성된 매개변수를 props라고 부르며, properties의 줄임말이다.

예를 들어, React Native의 기본 컴포넌트 중 하나인 Image를 살펴보자. 이미지를 생성할 때 source라는 prop을 사용해 어떤 이미지를 표시할지 제어할 수 있다.

{pic} 주변의 중괄호를 주목하자. 이 중괄호는 pic 변수를 JSX에 삽입한다. JSX 안에서는 중괄호 안에 어떤 자바스크립트 표현식이라도 넣을 수 있다.

여러분이 만든 컴포넌트도 props를 사용할 수 있다. 이를 통해 하나의 컴포넌트를 앱의 여러 곳에서 조금씩 다른 속성으로 재사용할 수 있다. render 함수에서 props를 참조하면 된다. 다음 예제를 보자:

TypeScript

JavaScript

name을 prop으로 사용하면 Greeting 컴포넌트를 커스터마이징할 수 있다. 이렇게 하면 해당 컴포넌트를 여러 번 재사용할 수 있다. 이 예제는 코어 컴포넌트와 유사하게 JSX에서 Greeting 컴포넌트를 사용한다. 이런 기능이 React를 강력하게 만드는 이유다. 만약 다른 UI 프리미티브를 사용하고 싶다면, 직접 새로운 컴포넌트를 만들 수 있다.

여기서 새롭게 등장한 것은 View 컴포넌트다. View는 다른 컴포넌트를 담는 컨테이너로, 스타일과 레이아웃을 제어하는 데 유용하다.

props와 기본 Text, Image, View 컴포넌트를 사용하면 다양한 정적 화면을 구성할 수 있다. 앱이 시간에 따라 변화하도록 만들려면 State에 대해 배워야 한다.