React 이벤트 처리: onClick 에 대한 초보자 가이드

소개

웹 개발에서 이벤트 처리는 클릭, 키 입력 또는 마우스 이동과 같은 사용자 동작에 응답하는 프로세스입니다. React 는 이러한 이벤트를 처리하는 간단하고 선언적인 방법을 제공하여 애플리케이션을 상호작용 가능하게 만듭니다.

React 의 이벤트 시스템은 브라우저의 네이티브 이벤트 시스템을 감싸는 (wrapper) 것입니다. 이벤트 이름은 onclick 대신 onClick과 같이 camelCase 로 작성됩니다. 문자열 대신 함수를 이벤트 핸들러로 전달합니다.

이 랩에서는 React 의 이벤트 처리 기본 사항을 배우게 됩니다. 간단한 버튼으로 시작하여 클릭 이벤트를 처리하고, 이벤트 데이터에 접근하며, 기본 브라우저 동작을 제어하는 기능을 점진적으로 추가할 것입니다.

이 랩이 끝나면 다음을 수행할 수 있습니다.

버튼에 onClick 이벤트 핸들러를 연결합니다.
컴포넌트 내에서 핸들러 함수를 정의합니다.
핸들러 함수를 이벤트 속성 (attribute) 에 올바르게 전달합니다.
이벤트 객체에 접근하여 이벤트에 대한 정보를 얻습니다.
event.preventDefault()를 사용하여 기본 브라우저 동작을 방지합니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 93%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

버튼 요소에 onClick 속성 추가

이 단계에서는 개발 환경을 설정하고 버튼 요소에 onClick 속성을 추가하는 것부터 시작합니다. 이것이 React 에서 요소를 상호작용 가능하게 만드는 첫 번째 단계입니다.

먼저 프로젝트 디렉토리로 이동하여 필요한 종속성을 설치하고 개발 서버를 시작합니다.

WebIDE 에서 터미널을 열고 다음 명령을 하나씩 실행합니다.

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

npm run dev를 실행한 후 개발 서버가 실행 중임을 나타내는 출력을 볼 수 있습니다. 이제 LabEx 인터페이스의 Web 8080 탭으로 전환하여 애플리케이션을 볼 수 있습니다. 간단한 "Click me" 버튼이 표시되어야 합니다.

이제 이벤트 핸들러를 추가해 보겠습니다. WebIDE 왼쪽의 파일 탐색기에서 src/App.jsx 파일을 엽니다.

현재 src/App.jsx 파일은 다음과 같습니다.

function App() {
  return <button>Click me</button>;
}

export default App;

클릭에 응답하려면 <button> 요소에 onClick 속성을 추가해야 합니다. React 에서는 이벤트 속성이 camelCase 로 작성됩니다. 지금은 빈 인라인 화살표 함수 (arrow function) 를 전달하겠습니다.

src/App.jsx에서 <button> 요소를 아래와 같이 수정합니다.

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

파일을 저장합니다. 버튼을 클릭해도 아직 눈에 보이는 동작은 없지만, 성공적으로 이벤트 리스너를 연결했습니다.

컴포넌트 내부에 핸들러 함수 정의

이 단계에서는 클릭 이벤트를 처리하기 위해 컴포넌트 내에 전용 함수를 정의합니다. 이는 JSX 를 깔끔하게 유지하고 로직을 체계적으로 구성하는 일반적인 방법입니다.

JSX 의 onClick 속성 안에 로직을 직접 작성하는 대신, 별도의 함수를 정의하는 것이 좋습니다. handleClick이라는 함수를 만들어 보겠습니다.

src/App.jsx 파일에서 App 컴포넌트의 return 문 앞에 handleClick 함수를 정의합니다. 지금은 이 함수가 단순히 콘솔에 메시지를 기록할 것입니다.

src/App.jsx 파일을 다음 코드로 업데이트합니다.

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={() => {}}>Click me</button>;
}

export default App;

이 시점에서 handleClick 함수는 정의되었지만 아직 버튼의 onClick 이벤트에 연결되지 않았습니다. 다음 단계에서는 이 함수를 onClick 속성에 전달하는 방법을 배우게 됩니다.

괄호 없이 핸들러를 onClick 에 전달

이 단계에서는 정의한 handleClick 함수를 버튼의 onClick 이벤트에 연결합니다. 함수를 호출한 결과가 아닌, 함수 자체의 참조를 전달하는 것이 매우 중요합니다.

handleClick 함수를 이벤트 핸들러로 사용하려면 중괄호 {} 안의 onClick 속성에 전달해야 합니다.

src/App.jsx에서 handleClick을 onClick에 전달하도록 <button> 요소를 수정합니다.

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

onClick={handleClick()}이 아니라 onClick={handleClick}이라고 작성하는 것에 유의하십시오.

onClick={handleClick}은 함수 자체를 전달합니다. React 는 버튼이 클릭될 때 이 함수를 호출합니다.
onClick={handleClick()}은 컴포넌트가 렌더링될 때 함수를 즉시 호출하고 반환 값 (이 경우 undefined) 을 onClick에 전달합니다. 이는 초보자들이 흔히 저지르는 실수입니다.

이제 테스트해 보겠습니다.

src/App.jsx 파일을 저장합니다.
Web 8080 탭으로 이동합니다.
브라우저의 개발자 콘솔을 엽니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "Inspect"를 선택한 다음 "Console" 탭을 클릭하여 열 수 있습니다.
"Click me" 버튼을 클릭합니다.

버튼을 클릭할 때마다 콘솔에 "Button was clicked!" 메시지가 나타나는 것을 볼 수 있습니다.

핸들러 매개변수에서 이벤트 객체 접근

이 단계에서는 React 가 이벤트 핸들러에 자동으로 전달하는 이벤트 객체에 접근하는 방법을 배웁니다. 이 객체는 사용자의 상호작용에 대한 유용한 정보를 담고 있습니다.

React 는 모든 이벤트 핸들러에 첫 번째 인자로 "합성 이벤트 (synthetic event)" 객체를 전달합니다. 이 객체는 브라우저의 네이티브 이벤트에 대한 크로스 브라우저 (cross-browser) 래퍼 (wrapper) 로, 일관된 API 를 제공합니다.

이벤트 객체에 접근하려면 handleClick 함수에 매개변수를 추가해야 합니다. 관례적으로 event 또는 e라고 명명합니다. 함수가 이 매개변수를 받아 콘솔에 기록하도록 수정해 보겠습니다.

src/App.jsx 파일을 업데이트합니다.

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

이제 파일을 저장하고 Web 8080 탭으로 돌아갑니다. 개발자 콘솔이 열려 있는지 확인하십시오. 버튼을 클릭하면 더 이상 간단한 문자열이 보이지 않습니다. 대신 콘솔에 SyntheticBaseEvent 객체가 기록되는 것을 볼 수 있습니다.

콘솔에서 이 객체를 확장하여 속성을 검사할 수 있습니다. 예를 들어 다음과 같은 정보를 찾을 수 있습니다.

event.type: 이벤트의 유형 (예: "click").
event.target: 이벤트를 트리거한 DOM 요소 (<button>).

이 이벤트 객체는 강력하며 정보를 읽고 이벤트의 동작을 제어할 수 있게 해줍니다.

event.preventDefault() 로 기본 동작 방지

이 단계에서는 이벤트와 관련된 브라우저의 기본 동작을 방지하는 방법을 배웁니다. 이는 특히 폼 제출을 처리할 때 자주 요구되는 기능입니다.

일부 브라우저 이벤트는 기본 동작을 가지고 있습니다. 예를 들어, 링크를 클릭하면 새 페이지로 이동하고, <form> 안의 제출 버튼을 클릭하면 일반적으로 페이지 새로고침을 유발하는 폼 제출이 발생합니다.

이를 시연하기 위해 버튼을 <form> 요소로 감싸 보겠습니다. 기본적으로 폼 안의 버튼을 클릭하면 폼 제출이 트리거됩니다.

src/App.jsx를 업데이트하여 <form> 태그를 포함시킵니다.

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

이것을 저장하고 지금 버튼을 클릭하면 페이지가 새로고침되고, 콘솔 로그가 사라지기 전에 잠시 보일 수 있습니다. 이것이 폼의 기본 제출 동작입니다.

이를 방지하려면 핸들러 안에서 event.preventDefault()를 호출하면 됩니다. 이 메서드는 브라우저에게 기본 동작을 수행하지 않도록 지시합니다.

handleClick 함수를 수정하여 event.preventDefault()를 호출하도록 합니다.

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

파일을 저장하고 다시 시도해 보세요. 이제 Web 8080 탭에서 버튼을 클릭해도 페이지가 새로고침되지 않습니다. 콘솔에 "Form submission prevented!" 메시지가 일관되게 기록되는 것을 볼 수 있습니다. 이벤트의 동작을 성공적으로 제어했습니다.

요약

실습을 완료하신 것을 축하드립니다! React 에서 이벤트 처리의 기본 개념을 익혔습니다.

이번 실습에서는 다음을 연습했습니다.

JSX 에서 onClick 속성을 사용하여 사용자 클릭을 감지하는 방법.
코드를 체계적으로 유지하기 위해 컴포넌트 내부에 이벤트 핸들러 함수를 정의하는 방법.
렌더링 중에 함수를 호출하는 일반적인 함정을 피하면서 이벤트 핸들러 prop 에 함수 참조를 올바르게 전달하는 방법.
사용자의 상호작용에 대한 귀중한 정보를 담고 있는 React 가 제공하는 합성 이벤트 객체에 접근하는 방법.
event.preventDefault()를 사용하여 브라우저의 기본 동작을 중지하고 사용자 경험을 완벽하게 제어하는 방법.

이러한 기술은 React 로 상호작용적이고 동적인 사용자 인터페이스를 구축하는 데 필수적입니다. 이러한 동일한 원칙을 입력에 대한 onChange, 호버 효과에 대한 onMouseOver 등 다른 이벤트를 처리하는 데 적용할 수 있습니다.