반응형
props 란?
properties의 약자로 컴포넌트를 사용하게 될때 특정 값을 전달하고 싶을때 사용한다.이를 통해 React 애플리케이션은 데이터의 단방향 흐름을 유지하면서 구조화된 방식으로 컴포넌트를 조합 할수 있다.
예제를 통해 설명하겠다
// ToDoList.js
import React from 'react';
import ToDoItem from './ToDoItem';
const ToDoList = () => {
// 할일 목록 데이터
const toDos = [
{ id: 1, text: 'React 공부하기' },
{ id: 2, text: '컴포넌트 만들기' },
{ id: 3, text: 'props 사용하기' }
];
return (
<div>
<h2>To Do List</h2>
<ul>
{toDos.map(todo => (
// ToDoItem 컴포넌트에 props로 데이터를 전달
<ToDoItem key={todo.id} text={todo.text} />
))}
</ul>
</div>
);
};
export default ToDoList;
import React from 'react';
const ToDoItem = (props) => {
return (
<li>{props.text}</li>
);
};
export default ToDoItem;
ToDoList 컴포넌트는 toDos 배열을 가지고 있다. 이 배열은 할일 항목을 나타내고 map 함수를 사용하여 각 할일 항목에 대해 ToDoItem 컴포넌트를 생성하고, ToDoItem 컴포넌트에는 text라는 prop을 전달한다.
ToDoItem 컴포넌트에서는 props를 매개변수로 받아와서 해당 prop을 사용하여 할일 항목의 텍스트를 렌더링한다.
위같은 방법으로 부모 컴포넌트인 ToDoList가 할일 목록 데이터를 갖고 있고, 이 데이터를 props로 전달하여 자식 컴포넌트인 ToDoItem이 화면에 각각의 할일 항목을 렌더링한다.
만약 비구조화 할당을 통해 props의 text를 전달 받기를 원한다면 아래와 같이 사용하면 된다.
실제로 비구조화 할당을 사용하여 값을 가져오는경우가 더 많다.
import React from 'react';
const ToDoItem = ({text}) => {
return (
<li>{text}</li>
);
};
export default ToDoItem;
반응형
