props
- 중복을 피하고 하나의 컴포넌트를 여러 자식 컴포넌트에서 재사용하기 위함
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ banana, big }) {
//중괄호 안에 키값을 적어 숏컷으로 값을 바로 받을 수 있다*/
console.log(big)
return (
<button
style={{
backgroundColor: 'tomato',
color: 'white',
padding: '10px 20px',
border: 0,
borderRadius: 10,
fontSize: big ? 18 : 16
}}
>
{banana}
</button>
)
}
function App() {
return (
<div>
<Btn banana='Save Change' big={true} />
{/* Btn 함수에 객체형식으로 파라미터를 넘겨줄 수 있다*/}
<Btn banana='Continue' big={false} /> {/* 키, 값 형식으로 전달*/}
</div>
)
}
const root = document.getElementById('root')
ReactDOM.render(<App />, root)
</script>
</html>
위와 같이 Btn 컴포넌트를 정의하고 재사용가능하며 파라미터에 객체형식으로 인자를 넣어 커스터마이징 할 수 있다
88888888