onClick

Click Event

click event는 대상 컴포넌트를 마우스로 클릭했을 때 발생하는 이벤트이다. 따라서 버튼, 링크 등에 많이 사용한다.

이벤트 설정 방법

이벤트는 JSX에 다음과 같이 작성하여 설정한다.

function testFunc(){}

app.render(
    <>
        <button onClick={testFunc}>click</button>
    </>
);

이벤트 정보(클릭 위치, 시간) 등을 알고 싶거나 기본 이벤트를 차단해야 하는 경우 이벤트 객체를 함수에 선언하여 사용한다.

function testFunc(e){
    //e.preventDefault();
    //e.getX();
    //...
}

app.render(
    <>
        <button onClick={testFunc}>click</button>
    </>
);

간단한 처리 내용의 경우 화살표 함수(Arrow function)을 사용하여 처리할 수 있다.

<button onClick={()=>{코드}}>click</button>

예제 - 글자 색상 변경

let color = "black";
function red(){
    color = "red";
    startRendering();
}
function green(){
    color = "green";
    startRendering();
}
function blue(){
    color = "blue";
    startRendering();
}
function startRendering(){
    app.render(
        <>
            <button onClick={red}>red</button>
            <button onClick={green}>green</button>
            <button onClick={blue}>blue</button>
            <h1 style={{color:color}}>Hello React JS</h1>
        </>
    );
}
const app = ReactDOM.createRoot(document.querySelector("#app"));
startRendering();

예제 - 이미지 크기 변경

let width = 200;
let height = 200;
function small(){
    width = 100;
    height = 100;
    startRendering();
}
function normal(){
    width = 200;
    height = 200;
    startRendering();
}
function big(){
    width = 300;
    height = 300;
    startRendering();
}
function startRendering(){
    app.render(
        <>
            <button onClick={small}>small</button>
            <button onClick={normal}>normal</button>
            <button onClick={big}>big</button>
            <hr/>
            <img src="https://placeimg.com/200/200/any" width={width} height={height}/>
        </>
    );
}
const app = ReactDOM.createRoot(document.querySelector("#app"));

예제 : 글자 크기

let size = 16;
function decrease(){
    if(size == 5) return;
    size--;
    startRendering();
}
function increase(){
    if(size == 30) return;
    size++;
    startRendering();
}
function startRendering(){
    app.render(
        <>
            <button onClick={decrease}>-</button>
            <span>{size}</span>
            <button onClick={increase}>+</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"));