Props 소개

3분

React 구성 요소는 재사용 가능 단위로 제작되었습니다. 재사용을 허용하기 위해, 데이터를 속성(props)을 통해 구성 요소로 전달할 수 있습니다.

props는 구성 요소의 단일 인스턴스에 사용할 수 있는 읽기 전용 값입니다. 프로그래밍 방식으로 설정하거나 HTML 요소의 특성을 설정할 때 사용하는 것과 동일한 구문을 사용하여 설정할 수 있습니다. 일반 HTML과 달리 props는 문자열이나 기본값에 제한되지 않으며 복합 개체나 배열일 수도 있습니다. props는 구성 요소 내의 this 속성으로 사용할 수 있습니다. props는 구성 요소에 필요한 수의 속성을 포함할 수 있으며, 개체 또는 기타 데이터 형식을 저장할 수 있습니다.

시나리오

구성 요소를 재사용 가능하게 하려면 일반적으로 데이터를 전달하여 속성으로 표시되게 해야 합니다. 여기서는 레시피의 제목을 표시하며 하나의 속성으로 전달되는 RecipeTitle이라는 구성 요소를 만듭니다.

구성 요소 만들기

개요에 강조 표시된 내용을 따라 Visual Studio Code에서 starter 폴더를 엽니다.
Visual Studio Code에서 src/RecipeTitle.jsx를 엽니다.

// TODO: Create RecipeTitle component 줄 아래에 다음 코드를 추가합니다.

// TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
        </section>
    )
};

export default RecipeTitle;

코드 탐색

RecipeTitle은 기본 React 구성 요소와 비슷해 보이며 두 가지 주요 업데이트가 있습니다.

첫 번째로 이것은 props라는 매개 변수를 허용합니다. 그리고 구성 요소를 사용할 때 전달된 모든 특성이나 속성을 자동으로 포함합니다.

두 번째로 props에 포함된 값은 일반적인 매개 변수처럼 사용할 수 있습니다. h2 요소 안에 표시되는 title이라는 단일 값을 찾아야 합니다.

구성 요소 사용

지금부터는 새로운 RecipeTitle 구성 요소를 title 속성과 함께 사용하도록 App.jsx를 업데이트하겠습니다.

App.jsx를 엽니다.
TODO: Add import for RecipeTitle 줄 아래에 다음 코드를 추가하여 새로 만든 RecipeTitle 구성 요소를 가져옵니다.
```
// TODO: Add import for RecipeTitle
import RecipeTitle from './RecipeTitle'
```

TODO: Add recipe object 줄 아래에 다음 코드를 추가하여 레시피용 개체를 만듭니다.

// TODO: Add recipe object
const recipe = {
    title: 'Mashed potatoes',
    feedback: {
        rating: 4.8,
        reviews: 20
    },
    ingredients: [
        { name: '3 potatoes, cut into 1/2" pieces', prepared: false },
        { name: '4 Tbsp butter', prepared: false },
        { name: '1/8 cup heavy cream', prepared: false },
        { name: 'Salt', prepared: true },
        { name: 'Pepper', prepared: true },
    ],
};

참고

이 모듈의 연습에서는 전체 recipe 개체를 사용합니다. 지금은 title을 집중적으로 살펴보겠습니다.

TODO: Add RecipeTitle component 줄 아래에 다음 코드를 추가합니다.

{/* TODO: Add RecipeTitle component */}
<RecipeTitle title={ recipe.title } />

코드 탐색

먼저 표시할 레시피를 나타내는 개체를 만들고 title 속성을 추가합니다. 그런 다음 HTML 요소 또는 기타 React 구성 요소를 사용할 때와 같은 방법으로 RecipeTitle 구성 요소를 사용합니다. 가장 큰 차이점은 title 특성을 recipe.title의 값으로 설정한다는 점입니다. 핸들바({ })를 사용하면 값을 동적으로 읽을 수 있습니다.

참고

title에 사용할 값이 문자열 리터럴이라면, title='Recipe title 문자열을 이용해 속성을 설정했을 것입니다.

페이지 표시

모든 파일을 저장합니다.
브라우저로 돌아가 페이지를 새로 고칩니다. 이제 페이지에 Mashed Potatoes라는 제목이 표시될 것입니다.

Props 소개

시나리오

구성 요소 만들기

코드 탐색

구성 요소 사용

코드 탐색

페이지 표시

피드백