[React.js] Kossie Coder - 7강. 컴포넌트로 반복 제거

1. Component 생성

Component를 사용하면 반복적인 코드를 재사용할 수 있다.

import React, {useState} from "react";

const Counter = () => {
	const [count, setCount] = useState(0);

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

	return (
		<button onClick={increment}>Click {count}</button>
	);
};

export default Counter;

2. Component 사용

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

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

---

강의 링크

https://youtu.be/CzQonZ-Qo2I