이벤트처리

10. 이벤트 처리
1> 개요
- 이벤트 핸들러(이벤트함수)는 함수 컴포넌트안에서 정의함.
ex>
    // 함수 컴포넌트
    function App() {

        // 이벤트 함수
        function go() {}

        return(
            // JSX
        );
    }

- JSX 에서 이벤트 처리는 카멜표기법(onClick, onChange, ...) 을 사용해야 된다.
- 기본문법 2가지
가. 이벤트함수명 이용
    onClick={이벤트함수명}
    ex>
        onClick={go}
        => 값을 넘길수가 없음.

    - 이벤트객체는 자동으로 전달됨.

나. arrow 함수 이용
    onClick={arrow함수}
    ex>
        onClick={ () => 동작처리코드 }
        onClick={ () => go(값) }
        => 임의의 값을 넘길때는 arrow 함수를 사용한다.
    
    - 명시적으로 함수 호출
    - 이벤트객체는 자동으로 전달 안됨. 명시적으로 전달해야 된다.

2> 이벤트 객체
- e.preventDefault();
- e.stopPropagation();


3> 계층구조 이벤트 처리
- 부모에 있는 함수를 자식에게 전달 가능하다.
  이 방법을 이용하면 자식이 부모에게 데이터 전달이 가능해진다.
  (계층적 이벤트 + props 이용)

  * 최종정리
                        props
    부모 ----------------------------------> 자식
           <----------------------------------
                계층적이벤트 + 파라미터

 

 

<이벤트처리>

# App.js

import logo from './logo.svg';
import './App.css';

// 함수형 컴포넌트

// https://yoon9i.tistory.com/192 에 js 문법정리부분(이벤트처리)인데 
// js 에서는 인라인방식을 사용하지않는다고 했지만 React 에서는 인라인방식을 사용한다.
function App() {

  // 이벤트핸들러 함수
  function handleEvent() {
    console.log("handleEvent");
  }

  function handleEvent1(e) { // 여러개 사용도 가능, 자동전달가능
    console.log("handleEvent1", e, e.target, e.target.innerHTML);
  }
  // e.target : <button onClick={handleEvent1}>OK1</button>
  // e.target.innerHTML: OK2

  // arrow 함수 이용 + 이벤트
  function handleEvent2(e) { // 자동으로 전달이 안됨, 명시적으로 설정
    console.log("handleEvent2", e);
  }

  // 데이터처리 + 이벤트
  function handleEvent3(name, e) {
    console.log("handleEvent3", name, e);
  }

  return (
    <div className="App">
      <h2>App 컴포넌트</h2>
      <button onClick={handleEvent}>OK</button>
      <button onClick={handleEvent1}>OK1 이벤트</button>
      <hr></hr>
      <button onClick={() => handleEvent2()}>OK2</button>
      <hr></hr>
      <button onClick={(e) => handleEvent2(e)}>OK2 이벤트</button>
      <hr></hr>
      <button onClick={() => handleEvent3("홍길동")}>OK3</button>
      <hr></hr>
      <button onClick={(e) => handleEvent3("홍길동", e)}>OK3 이벤트</button>
    </div>
  );
}

export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

 

<이벤트처리-계층적이벤트>

# App.js

import logo from './logo.svg';
import './App.css';
import Child from './component/child';

// 부모 컴포넌트
function App() {

  // 함수
  function handleEvent(name) {
    console.log("App.handleEvent", name); // 자식이 호출
  }

  // return (
  //   <div className="App">
  //     <h2>App 컴포넌트</h2>
  //     <자식컴포넌트명 변수명={함수명}} />
  //   </div>
  // );

  return (
    <div className="App">
      <h2>App 컴포넌트</h2>
      <Child onParent={handleEvent} />
    </div>
  );
}

export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

# components/Child.js

// 자식 컴포넌트
function Child(props) {
    console.log(props);
    var fun = props.onParent;

    // 이벤트함수
    function handleChildEvent() {
        // 복잡한 코드작업후 부모함수 호출도 가능.
        fun("홍길동");
    }

    return (
        <div className="Child">
            <h4>Child 컴포넌트</h4>
            <button onClick={fun}>부모함수호출1</button><br></br>
            <button onClick={() => fun()}>부모함수호출2</button><br></br>
            <hr></hr>
            <button onClick={() => handleChildEvent()}>부모함수호출3</button><br></br>
            <hr></hr>
            <button onClick={() => handleChildEvent()}>부모함수호출 + 부모에 전달</button><br></br>
        </div>
    );
}

export default Child;

 

<이벤트처리-계층적이벤트(TabButton) >

# App.js

import logo from './logo.svg';
import './App.css';
import TabButton from './components/TabButton';

function App() {

  function handleEvent(message) {
    console.log("클릭한 값: ", message); // ex> 클릭한 값: Java
  }

  return (
    <div className="App">
      <h2>App 컴포넌트</h2>
      <TabButton onParent={handleEvent}>Java</TabButton>
      <TabButton onParent={handleEvent}>SQL</TabButton>
      <TabButton onParent={handleEvent}>React</TabButton>
      <TabButton onParent={handleEvent}>Spring</TabButton>
    </div>
  );
}

export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

# components/TabButton.js

function TabButton(props) {
    console.log(props);

    var event = props.onParent;
    var message = props.children;
    console.log(event, message);

    return (
        <div className="TabButton">
            <h2>TabButton</h2>
            <button onClick={() => event(message)}>Click</button>
        </div>
    );
}

export default TabButton;