[nomad coder] 리액트 기초 2

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';

function Btn({text, big}){
    return <button
            style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10,
                fontSize: big? 20 : 10
            }}
            >{text}
        </button>;
}


function App(){
    return(
        <div>
            <Btn text="Change Saves" big={true}/>
            <Btn text="Confirm"/> 
        </div>
    );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)
reportWebVitals();

컴포넌트를 재사용 하는 방법에 대해 알아보았다.

컴포넌트의 매개변수를 설정하고, 컴포넌트를 사용하면서 인수로 text="value" 를 넘겨주면,

해당 인수를 사용할 수 있다.

 

function A(props){} 와 같이 넘겨주면, props내의 text, 즉 {props.text}로 접근해야 하나

shortcut 의 방식은 function A({ text} )로 .을 이용해 내부에 접근하지 않아도 바로 해당 인수를

사용할 수 있다.