[React] props의 이벤트 제어하기

 

사용하기 전에 알아두면 좋은 글

 

React, props 사용방법

2023.11.11 - [Web/React] - [React] props 사용하기

[React] props 사용하기

 

React, 사용자정의 Component

2023.11.11 - [Web/React] - [React] 사용자 정의 Component 만들기

[React] 사용자 정의 Component 만들기

 

코드 정의

import './App.css';

function App() {


  return (
    <div className="App">
      <Modal onChangeMode={function() {
        alert('몰랑피우의 블로그');
        }} />
    </div>
  );
}

function Modal(props) {
  return <div>
    <h1><a href="/" onClick={function(event) {
      event.preventDefault();   //a의 기본 event기능을 정지한다. a의 기본 event는 href가 정의가 되어있지 않을 경우 reflash기능이 있다.
      props.onChangeMode(); //Modal의 onChangeMode 함수를 불러온다.
    }}>이벤트 실행</a></h1>
  </div>
}

export default App;

 

 

설명

Modal Component에 onChangeMode 함수를 정의하였다.

사용자정의 Component인 Modal안에 JavaScript의 임의 Event를 생성하였다.

해당 Event가 동작할 경우, '몰랑피우의 블로그'의 alert창 호출하는 코드이다.

 

 

Modal Component 실행시

Modal Component안에는 a링크가 설정되어 있다.

해당 a링크가 실행될 경우, 반대로 Modal에 TAG에 설정된 event가 실행되도록 설계되어 있다.

 

Modal 안에는 a링크가 있으며, a링크를 onClick이벤트 호출 시, onChangeMode 함수가 실행되도록 만든 명령어이다.

props는 event 또한 불러오는 것을 확인할 수 있다.