study/React
react.js props
땅콩잉
2022. 1. 4. 21:37
728x90
리엑트 프로퍼티 속성에 대해 공부.
글자가 다른 같은 버튼을 컴포넌트 재사용으로 구현.
결과는 다음과 같음.
스타일 적을 땐 -로 적어주던 걸 뒷글자를 대문자로 쓰면서 카멜표기법처럼 쓰면된다.
ex: border-radius ==> borderRadius 이렇게.
버튼 만들 때 원하는 값을 컴포넌트로 전달하고 싶으면 옆에 원하는 키워드 명으로 적으면 됨.
컴포넌트 인자는 props라는 이름으로 오브젝트를 전달받게 됨.
인자값에 {banana,apple} 이런식으로 바로꺼내 쓸 수도있다.
<!DOCTYPE html>
<html>
<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">
const root = document.getElementById("root");
function Btn(props){//props: 버튼으로부터 전달받는 프로퍼티 오브젝트로 전달됨{banana:"confirm"} props는 첫번째이자 유일한 인자. 인자하나로 오브젝트안에 값넣어서 여러개 전달가능.
//props가 오브젝트라서 btn({banana,hihi}){} 라고하면 그냥 banana로 호출가능!->프로퍼티를 오브젝트로부터 꺼낸다.
return <button style={{
backgroundColor:"red",color:'#fff',padding:"10px 20px",borderRadius:10,marginBottom:"10px",
fontSize:props.big ? 18:16
}}>{props.banana}</button>
}
function App(){
return(
<div>
<Btn banana="confirm" apple="hihi"/>
<Btn banana="confirm2" big="false"/>
</div>
);
}
ReactDOM.render(<App/>,root);
</script>
</html>