ReactJS - 이벤트 인식 컴포넌트 만들기

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 ReactJS의 이벤트 인식 컴포넌트의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 저는 당신의 친절한 안내자가 될 것이며, 단계별로 설명하겠습니다. 이 튜토리얼의 끝까지 따라오면, 사용자의 작업에 응답할 수 있는 컴포넌트를 프로처럼 만들 수 있을 것입니다!

이벤트 인식 컴포넌트란?

먼저, "이벤트 인식" 컴포넌트가 무엇을 의미하는지 이해해 보겠습니다. 파티에서 있다고 상상해 보세요 (기다려, 이거는 코딩과 관련이 있어요, 믿어 주세요!). 당신은 그냥 돌처럼 서 있는 것이 아니라 - 주변에서 일어나는 일에 반응하고 있습니다. 누군가가 이야기할 때 웃고, 음식을 제공하면 가져갑니다. React에서 이벤트 인식 컴포넌트가 하는 일도 정확히 그와 같습니다 - 버튼 클릭이나 키보드 입력과 같은 일어나는 일에 반응합니다.

이벤트 인식 컴포넌트 만드는 방법

이제 우리는 첫 번째 이벤트 인식 컴포넌트를 만들기 위해 손을 내밀어 보겠습니다. 간단한 것으로 시작해 보겠습니다 - 클릭 횟수를 세는 버튼을 만들겠습니다.

단계 1: 컴포넌트 설정

먼저 기본적인 React 컴포넌트를 만들어 보겠습니다:

import React, { useState } from 'react';

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

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

export default ClickCounter;

이를 구분해 보겠습니다:

1. React과 useState를 'react' 라이브러리에서 가져옵니다.
2. ClickCounter라는 함수 컴포넌트를 정의합니다.
3. useState 훅을 사용하여 count 상태 변수와 그를 업데이트하는 setCount 함수를 만듭니다.
4. 버튼과 현재 카운트를 보여주는 문단을 반환하는 JSX를 반환합니다.

단계 2: 이벤트 핸들러 추가

이제 버튼이 클릭될 때 실제로 무언가를 할 수 있도록 합시다:

import React, { useState } from 'react';

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

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

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

export default ClickCounter;

이제 무엇이 새로운지 살펴보겠습니다:

1. handleClick 함수를 추가하여 count를 1 증가시킵니다.
2. 버튼에 onClick 속성을 추가하여 handleClick을 설정합니다.

이제 버튼이 클릭될 때마다 handleClick이 호출되어 카운트가 업데이트됩니다!

이벤트 핸들러에 추가 정보 전달

때로는 이벤트 핸들러에 추가 정보를 전달하고 싶을 수 있습니다. 보다 복잡한 예제를 만들어 보겠습니다 - 클릭할 때 이름을 로그하는 과일 목록을 만들겠습니다.

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

const handleFruitClick = (fruitName) => {
console.log(`You clicked on ${fruitName}`);
};

return (
<ul>
{fruits.map((fruit, index) => (
<li key={index} onClick={() => handleFruitClick(fruit)}>
{fruit}
</li>
))}
</ul>
);
}

export default FruitList;

이를 해부해 보겠습니다:

1. fruits 배열을 가집니다.
2. handleFruitClick 함수는 fruitName 매개변수를 받아서 그을 로그합니다.
3. JSX에서 map을 사용하여 각 과일에 대해 목록 항목을 만듭니다.
4. 각 항목의 onClick은 handleFruitClick을 과일 이름으로 호출하는 화살표 함수를 설정합니다.

이렇게 하면 클릭할 때 과일의 이름을 이벤트 핸들러에 전달합니다!

React에서 일반적인 이벤트 핸들러

React는 다양한 이벤트 핸들러를 지원합니다. 여기 몇 가지 일반적인 것들을 표로 정리해 보겠습니다:

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

결론

축하합니다! 이제 React에서 이벤트 인식 컴포넌트를 만드는 첫 단계를 밟았습니다. 우리는 클릭 핸들링, 이벤트 기반 상태 업데이트, 그리고 이벤트 핸들러에 추가 정보 전달의 기본을 다루었습니다.

이를 능숙하게 하는 것은 춤을 배우는 것과 같습니다 - 연습이 필요합니다! 처음에는 이해가 되지 않을 수도 있습니다 (의도된 디스). 계속 실험하고 다양한 유형의 상호작용 컴포넌트를 만들어 보세요. 그러면 곧 복잡한 사용자 상호작용을 쉽게 구성할 수 있을 것입니다!

제 경험에서는 수많은 학생들이 혼란에서 자신감으로 이르렀습니다. 당신도 그들의 길을 따를 수 있습니다. 계속 코딩하고, 호기심을 가지고, 가장 중요한 것은 즐겁게 하세요!

Credits: Image by storyset