이벤트 학습/ 컴포넌트 안에 컴포넌트 넣기

1. 컴포넌트에서 함수, onClick이벤트 생성

import './App.css';
import Hello from './Hello';

function App() {

  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;

function Hello(){

    function test1(){
        alert(111);
    }

    function test2(){
        alert(222);
    }

    return(
        <div>
            <button onClick={test1}>클릭111</button>
            <button onClick={test2}>클릭222</button>
        </div>
    )
}

export default Hello;

 

2. App.js에서 동적으로 함수 생성(props)

import './App.css';
import Hello from './Hello';

function App() {

  function func1(){
    alert(333);
  }

  return (
    <div className="App">
      <Hello func1={func1}/>
    </div>
  );
}

export default App;

function Hello(props){

    return(
        <div>
            <button onClick={props.func1}>클릭333</button>
        </div>
    )
}

export default Hello;

 

3. App.js의 return에서 컴포넌트를 불러오는 곳에서 직접 함수 생성

import './App.css';
import Good from './Good';

function App() {

  return (
    <div className="App">
      <Good func2={function(){ // 무명함수로 전달
        alert(444);
      }}/>
    </div>
  );
}

export default App;

import React from 'react'

function Good(props) {
  return (
    <div>
        <p>Good</p>
        <button onClick={props.func2}>클릭444</button>
    </div>
  )
}

export default Good

 

4. 매개변수가 있는 함수

import './App.css';
import Hi from './Hi';

function App() {

  return (
    <div className="App">
      <Hi func5={(msg)=>{ // 아래랑 서로 같음
        alert(msg);
      }}/>  
      <Hi func5={function(msg){
        alert(msg);
      }}/>
    </div>
  );
}

export default App;

import React from 'react'

function Hi(props) {
    function test5() {
        props.func5("555");
    }

    return (
        <div>
            <p>Hi</p>
            <button onClick={test5}>클릭555</button>
        </div>
    )
}

export default Hi

 

5. 최종본

import './App.css';
import Nice from './Nice';

function App() {

  return (
    <div className="App">
      <Nice func6={(msg)=>{
        alert(msg);
      }}/>
    </div>
  );
}

export default App;

import React from 'react'

function Nice(props) {
  return (
    <div>
        <p>Nice</p>
        <button onClick={()=>{
            props.func6(666);
        }}>클릭666</button>
    </div>
  )
}

export default Nice

 

7. 컴포넌트 안에 컴포넌트 넣기

App - Hellos - Buttons

import './App.css';
import Hellos from './Hellos';

function App() {
  return (
    <div className="App">
      <Hellos id="1" name="범키"/>
    </div>
  );
}

export default App;

import React from 'react'
import Buttons from './Buttons'

function Hellos(props) {
  return (
    <div>
        <p>{props.id}</p>
        <p>{props.name}</p>
        <Buttons/>
    </div>
  )
}

export default Hellos

import React from 'react'

function Buttons() {
  return (
    <div>
        <button onClick={()=>{
            alert(111);
        }}>버튼1</button>
    </div>
  )
}

export default Buttons