H'academy
  • H'academy
  • Web
    • Back-end
      • Spring Framework
        • Spring 개발환경 구축
          • Project 생성
          • Maven 설정
          • Maven 저장소 위치 설정
          • Apache Tomcat 연동
          • Lombok 설정
        • Spring MVC Project
          • pom.xml
          • web.xml
          • root-context.xml
          • servlet-context.xml
          • DispatcherServlet
        • Controller
          • File Upload / Download
          • RestController(작성중)
        • Spring Test
          • Assert 단정문
          • Spring 환경 연동 테스트
          • MockMvc Test
        • Spring AOP
          • AOP 용어
          • Pointcut Expression
          • Filter
          • Interceptor
          • Filter vs Interceptor
          • Controller Advice(작성중)
        • Spring JDBC
          • DBCP
          • myBatis
            • ResultMap 활용
        • ETC
          • Logging
            • Tomcat Logging 설정
          • Property 관리
          • E-mail
            • Gmail 변경사항
          • Scheduler
          • Websocket
      • Spring Boot
        • STS 다운로드
        • 프로젝트 생성
        • 프로젝트 구조
        • Spring Devtools
        • Spring Controller
          • JSP 연동
            • * JSP 생성불가 문제
            • Spring Boot 3.x
          • Model
          • 요청 파라미터 처리
          • 경로 변수 처리
          • 요청 메소드
          • Redirect
          • Spring Actuator
        • Spring Boot JDBC
          • Database 정보
          • DAO Pattern
          • ORM Framework
            • myBatis
              • Mapper 생성
            • Spring Data JPA
        • Spring AOP
          • AspectJ
          • Filter
          • Interceptor
          • ControllerAdvice
        • REST API
        • Spring WebSocket
        • Send Mail
        • Logging
        • Spring Boot Test
        • Lombok
      • Java EE
        • 개발환경 구성
          • Server와 Client
          • Web Server와 WAS
        • Dynamic Web Project
      • Apache Tomcat
        • Apache Tomcat 구조
        • Tomcat User 생성
        • Tomcat Manager 설정
      • Maven
      • Jenkins
        • Installation
          • Github Webhook 설정
          • Maven 연동
        • Project setting
          • 소스 코드 관리 설정
          • 빌드 유발 설정
          • 빌드 작업 설정
      • OpenAPI(swagger)
        • swagger 2.x (legacy)
        • swagger 3.x (boot)
        • Swagger UI 꾸미기
        • SpringDoc
    • Front-end
      • HTML
        • Heading
        • <A>
        • <IMG>
        • <DIV>
        • <TABLE>
        • <FORM>
          • <INPUT>
          • <SELECT>
          • <TEXTAREA>
          • <FIELDSET>
        • List
      • CSS
        • CSS 적용 방식
          • 크기(size)
            • 픽셀(px)
          • 색상(color)
        • CSS 선택자
          • 스타일 우선순위
        • CSS 주요 속성
          • 크기 속성
            • border
            • margin
            • padding
            • box-sizing
          • 배경 속성
          • 글자 속성
            • font
            • text
          • 배치 속성
            • position
            • display
            • overflow
            • float
            • flexbox
        • CSS Reset
      • JS
        • syntax
          • let, const
          • 구조 분해 할당
          • spread operator
          • Object copy
          • this
          • module
        • jQuery
          • structure
          • function
          • ajax
            • ajax file upload
        • VueJS
          • CDN(Vue3)
            • 기본 구조
            • Vue Devtools
            • jQuery vs VueJS
            • Vue instance
              • data
                • IME issue
              • v-model
              • template
              • computed
              • watch
                • deep watch
                • vs Computed
              • methods
            • Vue directive
              • v-text
              • v-html
              • v-bind
                • v-bind style
                • v-bind class
              • v-on
                • once
                • prevent
              • v-show
              • v-if
              • v-for
          • Vue-cli 3
            • 프로젝트 구조
            • src
              • main.js
              • App.vue
              • HelloWorld.vue
            • Vue Router 4
              • History mode
              • 404 not found
              • Guard
                • beforeEach
            • Vuex
              • 이동 횟수 측정
            • axios
              • interceptor
          • Vue-electron
        • ReactJS
          • CDN(React18)
            • 템플릿 설명
            • JSX
            • render
            • Handling Events
              • onClick
              • onInput
            • Component
              • 클래스 컴포넌트
                • state
                • props
                • event
                  • Mouse
                  • Input
                • lifecycle
              • 함수형 컴포넌트
                • useState
                • useEffect
                • useReducer
                • useMemo
                • props
                • 조건부 렌더링
          • CRA
            • 자원 경로 설정
            • src 절대 경로 설정
            • react-router
            • Context API
            • Electron 설정
        • Webpack
          • NodeJS
          • Git
    • Ubuntu server
      • Jenkins
    • 테스트 도구
      • JMeter
        • Test Plan
        • Test Plan(with login)
        • Plugin 설치
    • WebRTC
  • Base Language
    • Java
      • Java 실행 과정
        • 개발 환경 구축
        • 샘플 코드 작성
        • 컴파일/실행
        • 환경 변수 설정
      • Java 초급
        • Hello world
        • 자료와 정보
        • 변수
          • 정수
            • 정수의 저장 원리
            • 정수형 변수 생성
          • 실수
            • 실수의 저장 원리
            • 실수형 변수 생성
          • 논리
            • 논리형 변수 생성
          • 문자
          • 문자열
            • 문자열 변수 생성
          • 사용자 정의 자료형
        • 연산자
          • 대입 연산
          • 부호 연산
          • 산술 연산
          • 복합 대입 연산
          • 증감 연산
          • 쉬프트 연산
          • 비트 연산
          • 비교 연산
          • 논리 연산
          • 삼항 연산
          • 변환 연산
        • 표준 입출력
          • 표준 출력
          • 표준 오류 출력
          • 표준 입력
            • Scanner 입력
        • 제어문
          • if 구문
            • 단일 조건
            • 두 가지의 조건
            • 여러 가지의 조건
          • switch~case 구문
          • while 구문
          • do~while 구문
          • for 구문
        • 랜덤(Random)
        • 배열
          • 1차원 배열
          • 2차원 배열
          • 다차원 배열
          • Sort
            • 선택 정렬
            • 버블 정렬
            • 삽입 정렬
      • Java 중급
        • 객체 지향 프로그래밍
        • 클래스
        • 인스턴스
        • 필드
        • 메소드
          • 설정(setter) 메소드
          • 반환(getter) 메소드
        • 생성자
        • 접근 제한
          • private
          • package
          • protected
          • public
        • 정적(static)
        • 불변(final)
        • 상수(constant)
        • 상속
          • this와 super의 이해
          • 멤버 변수 설정
          • 멤버 메소드 설정
          • 생성자 설정
        • 추상화
          • 추상 클래스
          • 인터페이스
        • 다형성
        • 중첩 클래스
          • 일반 중첩 클래스
          • static 중첩 클래스
          • 지역 중첩 클래스
          • 익명 중첩 클래스
      • Java API(작성중)
        • java.lang
        • java.util
        • java.text
        • java.time
        • java.io
        • java.net
        • java.sql
        • java.awt
        • javax.swing
      • Java 고급
        • 제네릭(Generic)
        • 열거형(Enum)
        • Annotation Type
          • Retention
          • Target
          • Nested Annotation
        • Java Reflection
          • Intro
          • Class
          • Field
          • Constructor
          • Method
          • Package
      • JDBC
        • 드라이버 로드
        • 연결 생성
          • JDBC Driver 유형
        • JdbcTemplate
      • Java 버전별 변경사항
        • Java 1.8
          • Lambda Expression
          • Stream API
          • java.time 패키지
        • Java 9
        • Java 12
          • switch~case
        • Java 13
          • Text Block
    • Arduino
      • 학습 준비
        • Reference
        • 아두이노 온라인 시뮬레이터
        • 전기의 이해
        • 그라운드(GND)의 이해
      • 개발 환경 구축
        • CH340 보드 설치
        • Editor 글꼴 설정
      • 아두이노 제어
        • 코드의 구성
        • 시리얼 출력
        • 디지털 출력
          • LED 출력
        • PWM 출력
        • 시리얼 입력
        • 디지털 입력
          • PIR 센서
        • 아날로그 입력
          • 온도 센서(LM35DZ)
          • 조도 센서
          • 가스 센서
        • 피에조 부저
        • 서보 모터 제어
          • 시리얼 서보 모터 제어
          • 스위치 서보 모터 제어
        • 온습도 센서(DHT-11)
        • LCD
      • 아두이노 통신
        • 블루투스(Bluetooth)
          • HC-06
            • 온도 센서 활용
          • HM-10
        • 와이파이(Wi-Fi)
          • ESP-01
            • WiFiEsp 라이브러리 추가
            • WiFiEsp 네트워크 스캔
        • 이더넷(Ethernet)
        • ArduinoJson 라이브리 사용
    • Regular Expression
  • Database
    • Oracle
      • 설치
        • SQL Plus
        • SQL Developer
        • DBeaver
        • Docker(Mac OS)
      • SQL
        • 관리자 명령
          • 사용자 관리
          • 권한 관리
          • Encoding 설정
          • 서비스 포트 설정
        • 사용자 명령
          • 테이블 관리
            • 테이블 항목 제약 조건
            • 외래키 제약조건
            • 데이터 유형
          • 시퀀스 관리
          • 데이터 관리
            • 데이터 추가
            • 데이터 조회
              • 오라클 내장 함수
              • 그룹 조회
              • Top N Query
            • 데이터 수정
            • 데이터 삭제
          • 뷰 관리
          • 인덱스 관리
          • 집합 연산
          • 테이블 조인
            • 등가 조인
            • 외부 조인
        • HR 계정
        • 기타 명령
          • 컬럼 간격 조정
      • 내보내기 및 불러오기
        • EXPDP, IMPDP
        • Docker로 실행중인 경우
      • 기타
        • 자동 세션 제거
        • Tablespace 관리
        • Unlock user
  • 면접대비
    • Q&A
      • Java
      • Database
      • Web
      • IT 일반상식
  • ETC
    • Eclipse IDE
      • 설치
      • 화면 설명
      • 환경 설정
      • 프로젝트 생성
      • 소스파일 작성 및 실행
    • Github
      • Github 계정 관리
      • Github 저장소 관리
        • Profile
        • Collaborators
        • Code
        • Issues
        • Pull requests
        • Action
          • Vue 3 Deploy Action
      • Personal Access Token
      • Git ignore 설정
        • Spring 개발용 샘플
      • Github Eclipse 연동
        • Branches
        • Project
        • Team project
          • Dynamic web project
          • Spring Boot Project
          • Branch 생성
          • Pull Request
          • Branch 보호
          • Branch 다시 생성
    • Figma
      • Team
      • Design
      • Component
    • 과정평가형
      • 실기 모의고사 1회
      • 실기 모의고사 2회
      • 실기 모의고사 3회
      • 실기 모의고사 4회
    • VScode
      • Live Server 실행 오류
      • Github 계정 변경
    • Naver ToastUI Editor
      • Editor 만들기
        • Editor options
          • File upload
      • Viewer 만들기
    • 문자 인코딩 방식
    • OBS
      • 녹화 잡음 제거 설정
    • Semantic Version
Powered by GitBook
On this page
  • Mouse Event
  • onClick
  • 예제 - 화살표 함수를 사용한 글자 색상 변경
  • 예제 - Babel transform-class-properties를 사용한 글자 색상 변경
  • 예제 - 화살표 함수를 사용한 이미지 크기 변경
  • 예제 - Babel trasform-class-properties 사용한 이미지 크기 변경
  • 예제 - 화살표 함수를 사용한 글자 크기 변경
  • 예제 - Babel trasform-class-properties 사용한 글자 크기 변경
  1. Web
  2. Front-end
  3. JS
  4. ReactJS
  5. CDN(React18)
  6. Component
  7. 클래스 컴포넌트
  8. event

Mouse

PreviouseventNextInput

Last updated 2 years ago

Mouse Event

Mouse에서 발생할 수 있는 이벤트는 다음과 같다.

  • onClick - 좌클릭

  • onContextMenu - 우클릭

  • onDoubleClick - 더블클릭

  • onDrag - 드래그

  • onDragEnd - 드래그 종료

  • onDragEnter - 드래그 중 영역 진입(1회)

  • onDragOver - 드래그 중 영역 진입

  • onDragExit / onDragLeave - 드래그 중 영역 탈출(브라우저 차이)

  • onDragStart - 드래그 시작

  • onDrop - 마우스 드롭

  • onMouseDown - 마우스 버튼 누름

  • onMouseUp - 마우스 버튼 뗌

  • onMouseEnter - 마우스 커서 영역 진입(자식요소 제외)

  • onMouseLeave - 마우스 커서 영역 탈출(자식요소 제외)

  • onMouseMove - 마우스 커서 이동

  • onMouseOver- 마우스 커서 영역 진입(자식요소 포함)

  • onMouseOut - 마우스 커서 영역 탈출(자식요소 포함)

onClick

onClick 이벤트는 다음과 같이 설정한다

<button onClick={처리함수or코드}>click</button>

예제 - 화살표 함수를 사용한 글자 색상 변경

class MainComponent extends React.Component {
    state = {
        color:"black",
    };
    render(){
        const {color} = this.state;

        return (
            <>
                <button onClick={()=>{ this.setState({color:"red"}); }}>red</button>
                <button onClick={()=>{ this.setState({color:"green"}); }}>green</button>
                <button onClick={()=>{ this.setState({color:"blue"}); }}>blue</button>
                <button onClick={()=>{ this.setState({color:"black"}); }}>black</button>
                <h1 style={{color:color}}>This is react component</h1>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);

state에 색상 설정을 위한 변수를 설정한다.

state = {
    color:"black",
};

버튼을 누르면 화살표 함수 내에서 setState를 통해 색상을 변경하도록 버튼을 구성한다.

<button onClick={()=>{ this.setState({color:"red"}); }}>red</button>

예제 - Babel transform-class-properties를 사용한 글자 색상 변경

class MainComponent extends React.Component {
    state = {
        color:"black",
    };
    red = e=>{
        this.setState({ color : "red" });
    };
    green = e=>{
        this.setState({color : "green"});
    };
    blue = e=>{
        this.setState({color : "blue"});
    };
    black = e=>{
        this.setState({color : "black"});
    };
    render(){
        const {color} = this.state;

        return (
            <>
                <button onClick={this.red}>red</button>
                <button onClick={this.green}>green</button>
                <button onClick={this.blue}>blue</button>
                <button onClick={this.black}>black</button>
                <h1 style={{color:color}}>This is react component</h1>
            </>
        );
    }
}
const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);

예제 - 화살표 함수를 사용한 이미지 크기 변경

class MainComponent extends React.Component {
    state = {
        width:200,
        height:200,
    };
    
    render(){
        const {width, height} = this.state;

        return (
            <>
                <button onClick={()=>{ this.setState({ width:100, height:100 }); }}>small</button>
                <button onClick={()=>{ this.setState({ width:200, height:200 }); }}>normal</button>
                <button onClick={()=>{ this.setState({ width:300, height:300 }); }}>big</button>
                <hr/>
                <img src="https://placeimg.com/200/200/any" width={width} height={height}/>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);

우선 state에 폭(width)와 높이(height)의 값을 기본 크기인 200으로 저장한다.

state = {
    width : 200,
    height : 200
};

그리고 버튼에 이벤트를 설정하여 이를 변경하는 코드를 작성한다. 작은 크기로 설정하는 버튼은 다음과 같다.

<button onClick={()=>{ this.setState({ width:100, height:100 }); }}>small</button>

onClick 내부에 화살표 함수를 넣어 state의 width와 height를 각각 100으로 설정하는 코드를 추가하였다.

예제 - Babel trasform-class-properties 사용한 이미지 크기 변경

class MainComponent extends React.Component {
    state = {
        width:200,
        height:200,
    };
    
    small = e=>{
        this.setState({width : 100, height : 100});
    };
    normal = e=>{
        this.setState({width : 200, height : 200});
    };
    big = e=>{
        this.setState({width : 300, height : 300});
    };
    
    render(){
        const {width, height} = this.state;
    
        return (
            <>
                <button onClick={this.small}>small</button>
                <button onClick={this.normal}>normal</button>
                <button onClick={this.big}>big</button>
                <hr/>
                <img src="https://placeimg.com/200/200/any" width={width} height={height}/>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);

예제 - 화살표 함수를 사용한 글자 크기 변경

class MainComponent extends React.Component {
    state = {
        size:16,
    };
    
    render(){
        const {size} = this.state;
        
        return (
            <>
                <button onClick={()=>{this.setState({size:size-1})}}>-</button>
                <span>{size}</span>
                <button onClick={()=>{this.setState({size:size+1})}}>+</button>
                <hr/>
                <p style={{fontSize:size}}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat egestas lacus, eu mollis massa elementum vel. In eleifend metus quis dui maximus feugiat. Nunc aliquet laoreet libero, ornare molestie sapien mattis id. Sed ut sagittis sapien. Maecenas ut magna ut libero condimentum scelerisque at vitae tortor. Vestibulum ut ligula quis eros ullamcorper lobortis. Maecenas nec lacus lacinia, consectetur neque ut, mattis leo. Integer convallis interdum mauris sit amet porta.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus, risus vestibulum volutpat egestas, odio dui porttitor lectus, at hendrerit ex nisi non mi. Duis rhoncus sodales ex. Nunc facilisis tincidunt aliquam. Nullam quis ornare quam. Nam commodo neque sit amet blandit auctor. Duis non ligula fermentum, fermentum neque vel, cursus lorem. Quisque mollis bibendum scelerisque. Nam gravida accumsan cursus. Pellentesque rutrum, ligula ultricies consequat finibus, ligula augue interdum elit, vel varius nisl urna tincidunt leo. Maecenas metus orci, eleifend sit amet sapien et, rhoncus porttitor metus.
                Donec pretium ut nisi nec lacinia. Pellentesque efficitur at leo et tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque malesuada vel felis eu volutpat. Donec rutrum arcu in purus luctus consectetur. Phasellus ut dictum tellus, a vulputate sapien. Etiam blandit velit nibh, sit amet vulputate nulla fringilla id. Nam in odio tincidunt, suscipit nisl ac, volutpat nisi. Proin in turpis nisi. Duis congue aliquet dolor, id ornare metus rutrum ac. Vivamus sed magna ipsum. Praesent semper erat nec ex commodo, a vehicula purus tempus. Donec cursus pharetra arcu, non tristique ipsum faucibus id. Suspendisse id ex a purus condimentum tempor. Duis aliquam tellus vitae erat bibendum dapibus. Curabitur venenatis, arcu at tincidunt tristique, nunc orci hendrerit est, ac ullamcorper nisl turpis quis erat.
                In hac habitasse platea dictumst. Duis rhoncus pellentesque dolor, id tincidunt orci sagittis sit amet. Donec quis gravida lectus, sed dictum ex. Vivamus tempor imperdiet quam sit amet consectetur. Mauris arcu odio, vehicula in dignissim vitae, accumsan vitae ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel erat ante. Phasellus metus nisl, lacinia ac quam id, tempus ullamcorper sem. In facilisis, purus vitae ultrices pharetra, mi nisl cursus velit, at consectetur libero metus et est.
                Maecenas at nisi tincidunt, tristique tortor condimentum, venenatis turpis. Cras eu tellus tincidunt, commodo dolor quis, placerat est. Integer egestas ligula nec tellus bibendum tempor. Sed eleifend est odio. Proin malesuada felis id nisl mattis, non vestibulum augue pretium. Donec vel risus risus. Etiam vitae tellus sit amet nibh pretium porttitor. Phasellus interdum tellus rutrum nisi venenatis viverra. Integer quis risus sed nibh suscipit ornare. Pellentesque consectetur ullamcorper scelerisque. Praesent lacinia erat id turpis maximus, non egestas orci dapibus. Nam elementum lectus risus, vitae pulvinar metus egestas nec. In at auctor elit. Curabitur id sem sed lectus congue ultrices ac et dui.
                </p>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);

예제 - Babel trasform-class-properties 사용한 글자 크기 변경

class MainComponent extends React.Component {
    state = {
        size:16,
    };

    increase(e){
        // console.log(this);
        const {size} = this.state;
        this.setState({size:size+1});
    }

    decrease(e){
        const {size} = this.state;
        this.setState({size:size-1});
    }

    render(){
        const {size} = this.state;

        return (
            <>
                <button onClick={()=>this.decrease.call(this)}>-</button>
                <span>{size}</span>
                <button onClick={()=>this.increase.call(this)}>+</button>
                <hr/>
                <p style={{fontSize:size}}>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat egestas lacus, eu mollis massa elementum vel. In eleifend metus quis dui maximus feugiat. Nunc aliquet laoreet libero, ornare molestie sapien mattis id. Sed ut sagittis sapien. Maecenas ut magna ut libero condimentum scelerisque at vitae tortor. Vestibulum ut ligula quis eros ullamcorper lobortis. Maecenas nec lacus lacinia, consectetur neque ut, mattis leo. Integer convallis interdum mauris sit amet porta.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus, risus vestibulum volutpat egestas, odio dui porttitor lectus, at hendrerit ex nisi non mi. Duis rhoncus sodales ex. Nunc facilisis tincidunt aliquam. Nullam quis ornare quam. Nam commodo neque sit amet blandit auctor. Duis non ligula fermentum, fermentum neque vel, cursus lorem. Quisque mollis bibendum scelerisque. Nam gravida accumsan cursus. Pellentesque rutrum, ligula ultricies consequat finibus, ligula augue interdum elit, vel varius nisl urna tincidunt leo. Maecenas metus orci, eleifend sit amet sapien et, rhoncus porttitor metus.
                    Donec pretium ut nisi nec lacinia. Pellentesque efficitur at leo et tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque malesuada vel felis eu volutpat. Donec rutrum arcu in purus luctus consectetur. Phasellus ut dictum tellus, a vulputate sapien. Etiam blandit velit nibh, sit amet vulputate nulla fringilla id. Nam in odio tincidunt, suscipit nisl ac, volutpat nisi. Proin in turpis nisi. Duis congue aliquet dolor, id ornare metus rutrum ac. Vivamus sed magna ipsum. Praesent semper erat nec ex commodo, a vehicula purus tempus. Donec cursus pharetra arcu, non tristique ipsum faucibus id. Suspendisse id ex a purus condimentum tempor. Duis aliquam tellus vitae erat bibendum dapibus. Curabitur venenatis, arcu at tincidunt tristique, nunc orci hendrerit est, ac ullamcorper nisl turpis quis erat.
                    In hac habitasse platea dictumst. Duis rhoncus pellentesque dolor, id tincidunt orci sagittis sit amet. Donec quis gravida lectus, sed dictum ex. Vivamus tempor imperdiet quam sit amet consectetur. Mauris arcu odio, vehicula in dignissim vitae, accumsan vitae ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel erat ante. Phasellus metus nisl, lacinia ac quam id, tempus ullamcorper sem. In facilisis, purus vitae ultrices pharetra, mi nisl cursus velit, at consectetur libero metus et est.
                    Maecenas at nisi tincidunt, tristique tortor condimentum, venenatis turpis. Cras eu tellus tincidunt, commodo dolor quis, placerat est. Integer egestas ligula nec tellus bibendum tempor. Sed eleifend est odio. Proin malesuada felis id nisl mattis, non vestibulum augue pretium. Donec vel risus risus. Etiam vitae tellus sit amet nibh pretium porttitor. Phasellus interdum tellus rutrum nisi venenatis viverra. Integer quis risus sed nibh suscipit ornare. Pellentesque consectetur ullamcorper scelerisque. Praesent lacinia erat id turpis maximus, non egestas orci dapibus. Nam elementum lectus risus, vitae pulvinar metus egestas nec. In at auctor elit. Curabitur id sem sed lectus congue ultrices ac et dui.
                </p>
            </>
        );
    }

}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);
합성 이벤트(SyntheticEvent) – React
Logo