반응형

onClick 2

React에서 onclick 이벤트에 매개 변수 전달하기

리액트에서 클릭 이벤트 시 필요한 값을 매개변수로 전달할 때 일반적으로 자바스크립트에서 사용하던 방식으로 전달하게 되면 원하는 결과가 발생되지 않습니다. 만약 일반적인 방식처럼 작성한다면 리액트는 화면이 Render 되면서 계속해서 이벤트가 발생되기 때문에 우리가 원하는 특정 이벤트일 때 결과를 얻는 이벤트는 적용할 수 없습니다. 그래서 우리가 원하는 결과를 위해서는 화살표 함수로 감싸서 전달해야 우리가 원하는 클릭 이벤트가 발생했을 때 원하는 매개변수 값을 확인할 수 있습니다. 보다 이해가 쉽게 코드를 보면서 살펴볼게요. 예제 코드 import React from 'react'; const Example = () => { function sayHello(name) { alert(name); } retu..

IT/React 2022.05.13

컨펌(confirm)창에서 이벤트(Event) 핸들링 하기

특정 값을 확인할 때 우리는 3가지 항목을 사용하게 됩니다. console.log alert confirm 3가지 항목은 비슷한 성격을 가지면서도 다릅니다. 콘솔은 개발자 도구에서만 값이 확인이 가능하기에 데이터 값을 테스트할 때 주로 사용하게 되고 alert은 사용자에게 값을 팝업창으로 안내해주고 역할로서만 기능이 끝이 납니다. 컨펌(confirm)은 안내(질문)문에 대한 대답을 유저가 선택을 할 수 있게 구성되어 있습니다. 위의 화면처럼 [확인] 버튼을 클릭하면 true값을 반환하고 [취소]를 누르면 false값을 반환하게 되는데 우리는 이를 이용하여 다양하게 이벤트를 처리할 수 있습니다. onclick 이벤트를 사용하여 개별적으로 값을 처리할 경우 function에 자신의 this값을 값이 넘겨주어..

IT/JavsScript 2021.03.12
반응형
//