리액트에서는 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할 수 있다. 이 객체를 리액트에서는 Props라고 한다. Props는 Properties의 줄임말로 속성이라는 뜻이다.

리액트에서는 보통 재사용하려는 요소를 컴포넌트로 만든다.

예를 들어, 게시판 페이지를 리액트로 만든다고 가정해 보자. 사용자가 게시판에서 작성한 글은 게시물 리스트에서 하나의 항목으로 표시된다.

그런데 이 리스트에 존재하는 여러 게시물 항목은 내용은 각각 다르지만, 모두 동일한 구조이다. 리액트에서는 내용은 다르지만 구조가 같은 요소를 주로 컴포넌트로 만든다.

여러 게시물 리스트를 페이지에 표시할 때는 이 컴포넌트를 반복해 렌더링하고, 게시물 각각의 내용은 Props로 전달한다.

다음은 사용자가 작성한 일기를 리스트 형태로 보여주는 페이지이다.

위 그림의 감정 일기장은 일기 리스트를 보여주는데, 각각의 일기 항목은 컴포넌트로 구성되어 있다. 이 각각의 컴포넌트를 일기 컴포넌트라고 하겠다. 현재 감정 일기장에는 일기 컴포넌트가 2개 있는 셈이다.

2개의 일기 컴포넌트는 요소의 크기나 배열 등은 모두 같지만, 일기 내용, 작성일자, 감정 상태를 표현하는 이미지는 다르다. 이렇듯 리액트에서는 컴포넌트의 공통 기능이 아닌 세부 기능을 표현할 때 Props를 사용한다.

다음 그림과 같이 App이 Props로 작성일, 일기내용, 감정 상태를 전달 하면, 일기 컴포넌트는 전달된 Props를 토대로 일기 리스트를 페이지에 렌더링합니다.