[React] 버튼 클릭이벤트 만들기

 

HTML

 

<div id="root"></div>

 

 

JS(Babel)

 

class App extends React.Component{

  constructor(props){

    super(props);

  }

  render(){

    return <MyButton buttonName="김방울" clickFunc={this.props.myFunc}/>

  }  

//   CamelCase: 단어+단어 일때 뒤 단어의 첫 글자는 대문자로 표현

//   속성으로 접근.

}

 

class MyButton extends React.Component{

  constructor(props){

    super(props);

  }

  render(){

    const style = {

      width: "70px",

      height: "50px",

      "background-color": "orange",

      color: "white",

      border: "none"

    };

    

    return <button style={style} onClick={this.props.clickFunc}>{this.props.buttonName}</button>

  }

//   this.props.clickFunc -> 부모로부터 물려받은 이벤트를 할당할 것이다.

//   {this.props.buttonName -> 부모로부터 물려받은 버튼 이름을 사용할 것이다.

//   버튼이 잘 작동하려면 부모가 데이터를 넣어 주어야 함.

}

 

function 야옹(){

  alert('야옹!');

  

  return this;

}

 

ReactDOM.render(<App myFunc={야옹}/>, document.getElementById('root'));

//