Mouse

Mouse Event

합성 이벤트(SyntheticEvent) – Reactko.reactjs.org

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/>
);