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>'study > React' 카테고리의 다른 글
| react.js useEffect 처음 한 번만 렌더시키고 싶을 때 (0) | 2022.01.05 |
|---|---|
| react.js 리엑트 memo (0) | 2022.01.04 |
| react.js props [2] (0) | 2022.01.04 |
| React 프론트엔드 공부 (0) | 2020.07.18 |
댓글