props

---

props의 개념

• 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터(컴포넌트 간의 정보 교류 방법)
• props는 반드시 위에서 아래 방향으로 흐릅니다! 단, 부모=>자식 방향으로만 흐릅니다. (단방향)
• props는 반드시 읽기 전용으로 취급하며, 변경하지 않습니다.

props 사용법

예제 코드로 살펴봅시다!

src/App.jsx

import React from "react"

function App() {
	return <GrandFather />
}
function GrandFather() {
	return <Mother />
}
function Mother() {
	const name = "대한민국"
	return <Child />
}
function Child() {
	return <div>연결 성공</div>
}

위의 예제처럼 App 컴포넌트에는 GrandFather 컴포넌트가 담겨있고, Mother 컴포넌트 안에는 Child가 담겨져 있습니다.

근데 만약 엄마가 자식에게 이름을 지어준다면 어떻게 코드로 전달할 수 있을까요?

src/App.jsx

import React from "react"

function App() {
	return <GrandFather />
}
function GrandFather() {
	return <Mother />
}
function Mother() {
	const name = "대한민국"
	return <Child motherName={name}/> // props로 name을 전달!
}
function Child(props) {
	return <div>{props.name}</div>
}