LabEx
로그인무료 가입

React 이벤트 처리

ReactBeginner
지금 연습하기

소개

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

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

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

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

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

버튼 요소에 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에 전달합니다. 이는 초보자들이 흔히 저지르는 실수입니다.

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

  1. src/App.jsx 파일을 저장합니다.
  2. Web 8080 탭으로 이동합니다.
  3. 브라우저의 개발자 콘솔을 엽니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "Inspect"를 선택한 다음 "Console" 탭을 클릭하여 열 수 있습니다.
  4. "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 객체가 기록되는 것을 볼 수 있습니다.

React 합성 이벤트 객체를 보여주는 콘솔 로그

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

  • 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 등 다른 이벤트를 처리하는 데 적용할 수 있습니다.

관련 React 코스
초보자를 위한 React

초보자를 위한 React

reactjavascriptweb-development
React 를 사용하여 메모 앱 만들기

React 를 사용하여 메모 앱 만들기

reactjavascriptweb-development
React 로 크리스마스 위시리스트 빌더 만들기

React 로 크리스마스 위시리스트 빌더 만들기

reactjavascriptweb-development