728x90
<Btn text={value} onClick={changeValue}/> 이부분 이벤트 리스너가 아니라 Btn으로 들어가는 prop다!!
지금 prop의 이름일뿐 Btn안으로 전달되고있는 것. 그니까 여기다가 넣는건 하나의 prop이고!! function 안에 넣는건 이벤트리스너다.
전혀 다른것이다..
<Btn text={value} onClick={changeValue} style={{color:#000}}/>해도 스타일이 직접적으로 button에 달리지 않는다.
적용하려면 prop로 가져와서 적용시켜야 한다.
저기다 적은 onClick은 컴포넌트로 전달하는 무언가로 보면 될 듯!!
그래서 Btn컴포넌트에서 onClick가져오고 그 안에서 onClick으로 연결해줘야 이벤트리스너를 달아준것!!!
잘 이해한거 맞죠?
지나가다가 보신분들 틀린거 있으면 지적부탁드려요!!
<!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({text,onClick}){
return <button
onClick={onClick}
style={{
backgroundColor:"red",color:'#fff',padding:"10px 20px",borderRadius:10,marginBottom:"10px"
}}>{text}</button>
}
function App(){
const [value,setValue] = React.useState("save changes");
const changeValue = ()=>{
setValue("revert changes");
} ;
return(
<div>
<Btn text={value} onClick={changeValue}/>
<Btn text="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 (0) | 2022.01.04 |
| React 프론트엔드 공부 (0) | 2020.07.18 |
댓글