개발/리액트

React Event

whatd0udo 2024. 3. 13. 21:17

React Event

React에서 이벤트를 처리하는 방법은 HTML과 유사하지만, 몇 가지 차이점이 있습니다. React는 이벤트를 처리하기 위해 JSX를 사용하여 이벤트 핸들러를 DOM 요소에 직접 할당합니다. 이벤트 핸들러는 캐멀케이스(camelCase)를 사용하며, JavaScript 함수로 전달됩니다. React의 이벤트 시스템은 네이티브 이벤트를 감싸는 SyntheticEvent를 사용하여 크로스 브라우저 호환성을 보장합니다.

React에서의 이벤트 처리 기본

  • 캐멀케이스 사용: React에서는 HTML의 소문자 이벤트 대신 캐멀케이스를 사용합니다. 예를 들어, onclick 대신 onClick, onchange 대신 onChange와 같이 사용합니다.
  • 함수를 이벤트 핸들러로 전달: 이벤트 핸들러로 전달되는 값은 JavaScript 함수여야 합니다. 이 함수는 이벤트가 발생했을 때 실행됩니다.

예시: 클릭 이벤트 핸들링

function App() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

  return (
    <button onClick={handleClick}>
      클릭하세요
    </button>
  );
}

이벤트 핸들러에 인자 전달하기

이벤트 핸들러에 추가적인 인자를 전달하려면, 이벤트 핸들러를 감싸는 화살표 함수를 사용하거나 bind를 사용할 수 있습니다.

function App() {
  function handleClick(id, e) {
    console.log('버튼 ID: ' + id);
    console.log('이벤트: ', e);
  }

  return (
    <button onClick={(e) => handleClick(1, e)}>
      클릭하세요
    </button>
  );
}

이벤트 핸들링 주의사항

  • 이벤트 핸들러 내에서 this 사용: 클래스 컴포넌트에서 이벤트 핸들러 내에서 this를 사용하려면, 이벤트 핸들러를 클래스의 인스턴스로 바인딩해야 합니다. 생성자에서 this.handleClick = this.handleClick.bind(this);와 같이 바인딩하거나, 클래스 필드 문법을 사용해 화살표 함수로 이벤트 핸들러를 정의할 수 있습니다.
  • 이벤트 핸들링 성능: 대규모 어플리케이션에서는 이벤트 핸들러의 재생성을 피하기 위해 주의를 기울여야 합니다. 가능하다면, 이벤트 핸들러를 컴포넌트 밖에 정의하거나, 핸들러 내에서 필요한 데이터만 캡처하도록 합니다.

React에서의 이벤트 처리는 상호작용이 많은 UI를 구현할 때 핵심적인 부분입니다. 위의 기본 사항과 예시를 통해 React에서의 이벤트 처리 방법을 이해하고 적용할 수 있습니다.

React에서 이벤트를 처리하는 방법은 HTML과 유사하지만, 몇 가지 차이점이 있습니다. React는 이벤트를 처리하기 위해 JSX를 사용하여 이벤트 핸들러를 DOM 요소에 직접 할당합니다. 이벤트 핸들러는 캐멀케이스(camelCase)를 사용하며, JavaScript 함수로 전달됩니다. React의 이벤트 시스템은 네이티브 이벤트를 감싸는 SyntheticEvent를 사용하여 크로스 브라우저 호환성을 보장합니다.

React에서의 이벤트 처리 기본

  • 캐멀케이스 사용: React에서는 HTML의 소문자 이벤트 대신 캐멀케이스를 사용합니다. 예를 들어, onclick 대신 onClick, onchange 대신 onChange와 같이 사용합니다.
  • 함수를 이벤트 핸들러로 전달: 이벤트 핸들러로 전달되는 값은 JavaScript 함수여야 합니다. 이 함수는 이벤트가 발생했을 때 실행됩니다.

예시: 클릭 이벤트 핸들링

function App() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

  return (
    <button onClick={handleClick}>
      클릭하세요
    </button>
  );
}

이벤트 핸들러에 인자 전달하기

이벤트 핸들러에 추가적인 인자를 전달하려면, 이벤트 핸들러를 감싸는 화살표 함수를 사용하거나 bind를 사용할 수 있습니다.

function App() {
  function handleClick(id, e) {
    console.log('버튼 ID: ' + id);
    console.log('이벤트: ', e);
  }

  return (
    <button onClick={(e) => handleClick(1, e)}>
      클릭하세요
    </button>
  );
}

이벤트 핸들링 주의사항

  • 이벤트 핸들러 내에서 this 사용: 클래스 컴포넌트에서 이벤트 핸들러 내에서 this를 사용하려면, 이벤트 핸들러를 클래스의 인스턴스로 바인딩해야 합니다. 생성자에서 this.handleClick = this.handleClick.bind(this);와 같이 바인딩하거나, 클래스 필드 문법을 사용해 화살표 함수로 이벤트 핸들러를 정의할 수 있습니다.
  • 이벤트 핸들링 성능: 대규모 어플리케이션에서는 이벤트 핸들러의 재생성을 피하기 위해 주의를 기울여야 합니다. 가능하다면, 이벤트 핸들러를 컴포넌트 밖에 정의하거나, 핸들러 내에서 필요한 데이터만 캡처하도록 합니다.

React에서의 이벤트 처리는 상호작용이 많은 UI를 구현할 때 핵심적인 부분입니다. 위의 기본 사항과 예시를 통해 React에서의 이벤트 처리 방법을 이해하고 적용할 수 있습니다.

React에서 이벤트 핸들링을 구현하는 방법 example

import logo from './logo.svg';
import './App.css';
 
 
function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}

function Header(props){
  return <header>
    <h1><a href="/" onClick={(event)=>{
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}

function Nav(props){
  const lis = []
  for(let i=0; i<props.topics.length; i++){
    let t = props.topics[i];
    lis.push(<li key={t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
        event.preventDefault();
        props.onChangeMode(event.target.id);
      }}>{t.title}</a>
    </li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ] 
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}
 
export default App;

이 코드는 React에서 이벤트 핸들링을 구현하는 방법을 보여줍니다. 구체적으로, Header와 Nav 컴포넌트에서 사용자 정의 이벤트 핸들러를 사용하여 특정 동작(예: 페이지 이동 방지 및 상태 변경)을 수행하고 있습니다. 각 컴포넌트의 역할과 이벤트 처리 방법을 자세히 살펴보겠습니다.

Header 컴포넌트

Header 컴포넌트는 페이지의 제목과 링크를 표시합니다. 링크 클릭 시 기본 동작(페이지 이동)을 방지하고 props.onChangeMode() 함수를 호출하여 부모 컴포넌트(App)에 정의된 동작을 실행합니다. 이는 사용자가 "WEB" 제목을 클릭했을 때 발생하며, 현재 예시에서는 단순히 'Header'라는 알림을 표시합니다.

Nav 컴포넌트

Nav 컴포넌트는 주어진 topics 배열을 사용하여 내비게이션 링크의 리스트를 생성합니다. 각 링크에는 고유한 id가 할당되며, 클릭 이벤트가 발생하면 기본 동작(페이지 이동)을 방지하고 해당 링크의 id를 props.onChangeMode() 함수에 전달합니다. 이 함수는 부모 컴포넌트(App)로부터 전달받은 함수로, 클릭된 항목의 id에 해당하는 알림을 표시합니다.

Article 컴포넌트

Article 컴포넌트는 제목과 본문을 표시합니다. props.title과 props.body를 사용하여 동적으로 컨텐츠를 렌더링합니다. 현재 예시에서는 "Welcome" 제목과 "Hello, WEB" 본문이 정적으로 표시됩니다.

App 컴포넌트

App 컴포넌트는 애플리케이션의 메인 컴포넌트로, Header, Nav, Article 컴포넌트를 포함하고 있습니다. topics 배열을 정의하고 이를 Nav 컴포넌트에 props로 전달하여 각 주제에 대한 내비게이션 링크를 생성합니다. 또한, Header와 Nav 컴포넌트에 대한 이벤트 핸들러를 정의하여 각각 'Header' 알림과 클릭된 항목의 id에 해당하는 알림을 표시하도록 구성합니다.

이 코드 예제는 React에서 props를 통한 데이터 전달, 사용자 정의 이벤트 핸들링, 그리고 동적 UI 생성 방법을 잘 보여줍니다. 사용자 인터랙션에 반응하는 리액티브 UI를 구축하는 데 필요한 기본적인 개념들을 포함하고 있습니다.

저작자표시 비영리 변경금지