React의 Props를 알아보자

1️⃣ Props란?

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체입니다.

다시 말하면, 상위 컴포넌트에서 어떤 데이터를 보낼 것인지 정해 이 데이터를 props를 통해 객체 형태로 하위 컴포넌트로 보내줍니다.

 

---

 

 

2️⃣ 기본 사용법

예를 들어, App 컴포넌트에서 TodoList 컴포넌트를 사용 할 때 ‘name’ 이라는 값을 전달해주고 싶다고 합시다.

그러면 App.js에 이렇게 작성하면 됩니다.

⇒ 컴포넌트 내부에서 코드를 작성합니다.

 

App.js

import React from 'react';
import TodoList from './TodoList';

function App() {
	return (
		<TodoList name="study" />
	);
}

export default App;

 

 

그리고나서 TodoList 컴포넌트에서 name 값을 사용하고 싶을 땐 다음과 같이 작성해주면 됩니다.

⇒ 받는 쪽은 props 라는 예약어를 통해 받습니다.

 

TodoList.js

import React from 'react';

function TodoList(props) {
	return <div>오늘 할 일 : {props.name}</div>
}

export default TodoList;

 

컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있습니다.

props는 객체 형태로 전달되며, name 값은 props.name을 조회하면 됩니다.

 

여기서 props 객체 이름은 마음대로 정의해도 됩니다.

 

---

 

3️⃣ 비구조화 할당

props. 을 사용하지 않고 더 간결하게 쓰고 싶다면 ‘구조 분해’ 문법을 사용할 수 있습니다.

일반적으로 여러 개의 props를 사용할 때 간결하게 작성하는 방법입니다.

⇒ 컴포넌트의 파라미터에서 {} 안에 받는 내용을 미리 표기합니다.

 

TodoList.js

import React from 'react';

function TodoList(**{name}**) {
	return <div>오늘 할 일 : **{name}**</div>
}

export default TodoList;