ReactJS - 이벤트 관리

안녕하세요, 미래의 React 개발자 여러분! 오늘은 ReactJS에서 이벤트 관리의 흥미로운 세상으로 함께潜入합니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 여정을 안내해드리는 것을 기쁜 마음으로 생각합니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 기본부터 차근차근 설명해드릴게요. 그럼 커피 한 잔(또는 차, 만약 그게 당신의 취향이라면)을 챙기고, 시작해보겠습니다!

ReactJS에서의 이벤트 관리

이벤트는 상호작용적인 웹 애플리케이션의 생명线입니다. 우주선 조종실의 버튼과 레버처럼 - 일어나는 일을 만듭니다! ReactJS에서 이벤트 관리는 사용자와의 상호작용을 처리하는 방법을 의미합니다.

Thought experiment: 사용자가 버튼을 클릭할 때 점수를 증가시키는 간단한 클릭 게임을 상상해봅시다. 이때 이벤트 관리가 유용하게 쓰입니다!

React의 합성 이벤트

코드로 진입하기 전에 React의 독특한 점에 대해 이야기해보겠습니다: 합성 이벤트. 이 것은 React가 다양한 브라우저에서 일관된 방식으로 이벤트가 작동하도록 보장하는 방법입니다. 마치 앱의 대역을 제공하는 대역 번역가처럼!

React는 브라우저의 원생 이벤트를 래핑하고 일관된 인터페이스를 제공합니다. 이는 이벤트 처리 시 브라우저별 특이한 기능에 대해 걱정할 필요가 없음을 의미합니다.

이벤트 추가

간단한 예제로 시작해보겠습니다. 클릭할 때 경고를 표시하는 버튼을 만들어보겠습니다.

function AlertButton() {
return (
<button onClick={() => alert('You clicked me!')}>
Click me!
</button>
);
}

이 예제에서:

• AlertButton이라는 함수 컴포넌트를 정의합니다.
• 컴포넌트 내부에서 <button> 요소를 반환합니다.
• 버튼에 onClick 속성을 추가하여 이벤트 리스너를 연결합니다.
• onClick 속성은 alert()을 호출하는 아ロー 함수로 설정됩니다.

이 컴포넌트를 렌더링하고 버튼을 클릭하면 "You clicked me!"라는 경고가 뜹니다.

이벤트 처리

이제 좀 더 흥미로운 방법으로 변경해보겠습니다. 경고를 표시하는 대신, 버튼을 클릭할 때 컴포넌트의 상태를 업데이트합니다.

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<p>You've clicked {count} times</p>
<button onClick={handleClick}>
Click me!
</button>
</div>
);
}

이를 분해해보면:

1. useState를 React에서 import하여 컴포넌트 상태를 관리합니다.
2. ClickCounter라는 함수 컴포넌트를 정의합니다.
3. 컴포넌트 내부에서 useState(0)를 사용하여 count 상태 변수를 초기화하고, setCount 함수를 통해 이를 업데이트합니다.
4. handleClick 함수를 정의하여 setCount를 호출하여 카운트를 증가시킵니다.
5. JSX에서 현재 카운트와 버튼을 표시합니다.
6. 버튼의 onClick 속성은 handleClick 함수로 설정됩니다.

버튼을 클릭할 때마다 카운트가 1 증가합니다!

이벤트 처리자에 인자 전달

때로는 이벤트 처리자에 추가 정보를 전달하고 싶을 수 있습니다. 여러 개의 버튼이 있고, 각각의 버튼이 다른 과일과 연결된 예제를 보겠습니다.

import React, { useState } from 'react';

function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('');

const handleFruitClick = (fruit) => {
setSelectedFruit(fruit);
};

return (
<div>
<h2>Pick a fruit:</h2>
<button onClick={() => handleFruitClick('Apple')}>Apple</button>
<button onClick={() => handleFruitClick('Banana')}>Banana</button>
<button onClick={() => handleFruitClick('Cherry')}>Cherry</button>
<p>You selected: {selectedFruit}</p>
</div>
);
}

이 예제에서:

1. selectedFruit 상태 변수를 만들어 선택된 과일을 추적합니다.
2. handleFruitClick 함수는 fruit 매개변수를 받습니다.
3. 각 버튼의 onClick 속성에서 아ロー 함수를 사용하여 handleFruitClick을 호출하고 적절한 과일 이름을 전달합니다.

버튼을 클릭하면 selectedFruit 상태가 클릭한 과일의 이름으로 업데이트됩니다.

일반 React 이벤트

다음은 사용할 수 있는 일반 React 이벤트 목록입니다:

이벤트 이름	설명
onClick	요소가 클릭될 때 발생
onChange	입력 요소의 값이 변경될 때 발생
onSubmit	폼이 제출될 때 발생
onMouseEnter	마우스가 요소에 진입할 때 발생
onMouseLeave	마우스가 요소를 벗어날 때 발생
onKeyDown	키가 눌러질 때 발생
onKeyUp	키가 뗐을 때 발생
onFocus	요소가 포커스를 받을 때 발생
onBlur	요소가 포커스를 잃을 때 발생

기억해야 할 점은, 이 이벤트들은 React에서는 케밀 케이스로 사용되지만, HTML의 대소문자 구분 없는 형식과는 다르다는 점입니다.

그렇게 해서, 여러분은 React의 이벤트 관리 세계로 첫 걸음을 냈습니다. 이 예제들을 연습하고, 다양한 개념을 결합해보세요. 곧 프로처럼 상호작용적인 React 애플리케이션을 만들 수 있을 것입니다!

프로그래밍에서도, 인생에서도, 핵심은 계속 실험하고 배우는 것입니다. 실수 두려워 말아요 - 그것은 성공으로 가는 단계입니다. 행복하게 코딩하세요, 그리고 React가 여러분과 함께하길 바랍니다!

Credits: Image by storyset