프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

DEV

[ react] 하위에서 상위로 값 전달(function)

2023.01.10
북마크 작성자 정보
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); }
}



 

이 포스트 공유하기

답글쓰기 전체목록