Props

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

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

{pic} 주변의 중괄호를 확인하자. 이 중괄호는 pic 변수를 JSX에 삽입한다. JSX 내부의 중괄호 안에는 어떤 JavaScript 표현식이라도 넣을 수 있다.

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

TypeScript

JavaScript

name을 prop으로 사용하면 Greeting 컴포넌트를 커스터마이징할 수 있다. 이를 통해 각 인사말에 대해 동일한 컴포넌트를 재사용할 수 있다. 이 예제는 또한 Core Components와 유사하게 JSX 내에서 Greeting 컴포넌트를 사용한다. 이런 작업이 가능하다는 점이 React를 매우 강력하게 만든다. 만약 다른 UI 기본 요소를 사용하고 싶다면, 새로운 것을 직접 만들 수 있다.

여기서 또 다른 새로운 요소는 View 컴포넌트다. View는 다른 컴포넌트를 담는 컨테이너로 유용하며, 스타일과 레이아웃을 제어하는 데 도움을 준다.

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