HOWTO · React

React의 Href onClick 이벤트

이 튜토리얼에서는 React에서 href onClick 이벤트를 설정하는 방법에 대해 설명합니다.

작성자 Md Aminul Islam게시일 2023-06-21업데이트 2023-10-12

링크를 클릭할 때 특정 작업을 수행해야 하는 경우가 있습니다. 참조 링크로 이동하여 버튼으로 사용하십시오.

React JS에서는 href에 지정된 링크로 이동하지 않고도 <a> ... </a> 태그에서 작업을 쉽게 생성할 수 있습니다.

이 기사에서는 href를 사용하여 <a> ... </a> 태그에 대한 작업을 만드는 방법을 보여줍니다. 또한 주제를 더 쉽게 만들기 위해 예제와 설명과 함께 각 단계를 볼 것입니다.

href를 사용하여 <a> ... </a> 태그에 onClick 작업을 만듭니다.

<a> ... </a> 태그에 onClick 기능을 생성하려면 아래 단계를 따르십시오.

  • 먼저 구성 요소를 포함할 특정 <div> ... </div> 요소를 생성해야 합니다. HTML은 다음과 같이 표시됩니다.

    코드 - index.html:

    <!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta
	  name="description"
	  content="Web site created using create-react-app"
	/>
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
	<title>React App</title>
  </head>
  <body>
	<div id="root"></div>
  </body>
</html>
  • 이제 App.js 파일에서 작업해야 합니다. 이 파일은 다음과 같습니다.

    코드 - App.js:

    import './App.css';

function App() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('This is a link click action');
  }

  return (
	<a href='#' onClick={handleClick}>
	  Click me
	</a>
  );
}
export default App;

먼저 import './App.css'; 라인으로 리소스를 가져왔습니다. 함수 내에서 링크를 클릭할 때 수행되는 작업을 포함하는 handleClick 클릭 이벤트를 생성합니다.

이 클릭 이벤트 내에서 e.preventDefault(); 줄을 통해 모든 기본 작업을 비활성화했습니다. 그런 다음 console.log('This is a link click action'); 액션을 생성했습니다. 링크를 클릭하면 콘솔에 메시지가 표시됩니다.

예제를 실행하면 웹 콘솔에 아래 텍스트가 표시됩니다.

출력:

This is a link click action

이 글에서 공유하는 예제 코드는 React JS 프로젝트로 작성되었습니다. React 프로젝트를 실행하려면 시스템에 최신 Node JS 버전이 있어야 합니다.

작성자 소개

MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

작성자 프로필 보기
LinkedIn