2021.07.11(Sun.) <props의 고찰>

1. 사건의 발단

• useState를 올바르게 사용할 수 있게 되었더니 props로 정보를 더 다양하게 주고받으면 범용성이 많이 올라갈 것이라고 생각했다.
• 지금도 props를 사용하고 있지만 원리를 정확히 알고 사용하는 것이 좋겠다.

2. 기본적인 사용법

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 줄 때 사용한다.
• <컴포넌트 이름 props의 이름 = "주고싶은 값" />의 형태로 사용할 수 있다.

import React from 'react';

function App() {
	return (
		<div>
			<Greet name="Tony Stark" heroName="Iron Man" />
			<Greet name="Steve Rogers" heroName="Captain America" />
			<Greet name="Bruce Banner" heroName="Hulk" />
        	</div>
)}

export default App;

• 위의 경우  Greet라는 컴포넌트에 Name, heroName이라는 props로 값들이 들어가 있는 형태이다.
• 자식 컴포넌트에서는 {props.props이름}의 형태로 사용된다.

function Greet(props) {
	return (
		<h1>Hello {props.name} a.k.a {props.heroName}</h1>
)}

// Hello Tony Stark a.k.a Iron Man
// Hello Steve Rogers a.k.a Captain America
// Hello Bruce Banner a.k.a Hulk

• 아까 부모 컴포넌트에서 받은 props를 이렇게 사용했다.

3. 비구조화 할당을 이용한 사용법

function Greet({ name, heroName }) {
	return (
		<h1>Hello { name } a.k.a { heroName }</h1>
)}

// Hello Tony Stark a.k.a Iron Man
// Hello Steve Rogers a.k.a Captain America
// Hello Bruce Banner a.k.a Hulk

• 위와 똑같이 작동하지만 조금 더 짧게 사용할 수 있다.

4. defaultProps

• 컴포넌트에 따로 props를 안 정해놓고 어디서나 사용할 값을 설정할 수 있는 defaultProps를 설정할 수 있다.
• 그럼 부모가 되는 App.js파일에는 props로 넘겨주려고 하는 값이 없을 것이다.

function Greet({ name, heroname }) {
	return (
		<h1>Hello {name} a.k.a {heroName}</h1>
)}

Greet.defaultProps = {
	name: 'No Name',
    heroName: 'No Heroname'
}

exprot default Greet;

4. 주의점

• props는 '읽기 전용'이다. 컴포넌트 자체의 props를 수정할 수 없다. 즉 입력값을 변경해 버리면 안 된다.