[ react] 하위에서 상위로 값 전달(function)
2023.01.10
북마크 작성자 정보
작성일/수정일
2023-01-10 15:26:16 / 2023-01-10 15:26:16
Function 하위에서 상위로 값 전달
- app.js : useState 사용 "버튼이름" 기본값으로 설정 -> date_240110.js 으로 전달
- date_240110.js : bttton onClick 이벤트 실행 -> ex_fun(new_txt) 함수를 상위 app.js으로 전달
- app.js : 전달받은 ex_fun(ex_val)를 settext()를 이용 상태값 변경
- app.js
import { useState } from 'react';
import './layout.css';
import Header_area from './header_area.js';
import Article_area from './step0/date_240110.js';
export default function App() {
const [text, settext] = useState("버튼이름");
let ex_val = function(txt_val){
settext(txt_val);
}
return (
<div className="allwrap">
<Header_area head_txt="TOP_AREA" />
<section>
<Article_area btn_name={text} ex_fun={ex_val} />
</section>
</div>
);
}
- date_240110.js
export default function({btn_name, ex_fun}){
function fun_name(){
const new_txt = "grunt!!";
ex_fun(new_txt);
}
return(
<article>
<div className="btn_area">
<button onClick={fun_name} className='btn_style0'>{btn_name}</button>
</div>
</article>
);
}
-layout.css
/* DATE 240111 */
$line_ball1 : 1px solid #ececec;
$bgcolor1 : #000;
@mixin fG1_en ($v1,$v2,$v3){
font-family:'Roboto','sans-serif';
font-size:$v1;
color:$v2;
font-weight:$v3;
}
@mixin btn1($v1,$v2,$v3,$v4){
background:$v1;
color:$v2;
border-radius:$v3;
padding: 0 $v4 0 $v4;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
* { margin:0; padding:0; border:0; }
header { width:100%; height:80px; border-bottom:$line_ball1; }
footer { width:100%; height:100px; border-top:$line_ball1; }
section { width:100%; padding:50px 0 50px 0; }
article { margin:auto; width:1170px; }
.top_area {
margin:0 auto; width:1170px; height:80px; line-height:80px;
.top_head { width:100%; height:80px; display:flex; justify-content:center; align-items:center; @include fG1_en (18px,#000,700); }
}
.btn_area {
width:100%; min-height:40px; display:flex; justify-content:center; align-items:center;
.btn_style0 { width:auto; height:35px; @include btn1(#000,#fff,0px,5px); }
}