[React.js] Kossie Coder - 8강. 자식 컴포넌트에 데이터 보내기 Props!

1. 자식 컴포넌트

import React, {useState} from "react";

// 파라미터에 props 변수 지정
const Counter = (props) => {
	const [count, setCount] = useState(0);

	const increment = () => {
		setCount(count + 1);
	};

	const clickString = props.click || 'Click';

	return (
		{/* 부모 컴포넌트로부터 넘어오는 props 값에 의해 clickString 변수의 값이 지정되고 출력됨. */}
		<button onClick={increment}>{clickString} {count}</button>
	);
};

export default Counter;

2. 부모 컴포넌트

import React from "react";
import Counter from "./components/Counter";

function App() {
	const [buttonName, setButtonName] = useState('클릭');

	const clickButton = () => {
		setButtonName('click');
	};

	return (
		<div className="App">
			{/* 이런식으로 같은 컴포넌트를 여러 번 사용하여 코드를 재사용할 수 있다. */}
			<Counter click="click1"/>
			<Counter click={buttonName}/>
			<Counter/>
			<button onClick={clickButton}>Click</button>
		</div>
	);
}

export default App;

---

강의 링크

https://youtu.be/5y0UYsxRjx4