안녕하세요! 이번에는 React에서 자주 사용되는 다양한 이벤트 핸들링을 다루고, 이를 활용한 간단한 예제를 통해 어떻게 적용할 수 있는지 알아보겠습니다. 더불어, index.css 파일을 활용해 요소들을 스타일링하는 방법도 함께 살펴보겠습니다. 이 글을 통해 React의 이벤트 처리와 스타일링에 대한 기본 개념을 이해하고, 실전에서 어떻게 사용할 수 있는지 배워봅시닷!!
추우~ㄹ~~발!! (욕 아님.)
1. 폼 이벤트: onChange와 onSubmit
<폼 이벤트란?>
폼 이벤트는 사용자가 입력 필드에 값을 입력하거나 폼을 제출할 때 발생하는 이벤트입니다. React에서는 주로 onChange와 onSubmit 이벤트를 사용하여 폼의 상태를 관리하고 제출 시 특정 작업을 수행할 수 있습니다.
1.1 onChange 이벤트 예시
onChange 이벤트는 사용자가 입력 필드에 입력할 때마다 발생합니다. 이를 통해 사용자가 입력한 값을 실시간으로 처리할 수 있습니다.
<input
type="text"
className="input"
onChange={(e) => {
console.log(`입력된 값: ${e.target.value}`);
}}
/>1.2 onSubmit 이벤트 예시
onSubmit 이벤트는 사용자가 폼을 제출할 때 발생합니다. 이 이벤트를 통해 폼의 기본 동작(페이지 새로고침)을 막고, 제출된 데이터를 처리할 수 있습니다.
<form
onSubmit={(e) => {
e.preventDefault();
console.log("폼이 제출되었습니다.");
}}
>
<button type="submit">제출</button>
</form>2. 마우스 이벤트: onClick, onMouseEnter, onMouseLeave
<마우스 이벤트란?>
마우스 이벤트는 사용자가 마우스로 요소를 클릭하거나, 요소 위로 마우스를 이동할 때 발생하는 이벤트입니다. React에서는
onClick,onMouseEnter,onMouseLeave와 같은 이벤트를 통해 사용자와의 상호작용을 처리할 수 있습니다.
2.1 onClick 이벤트 예시
onClick 이벤트는 사용자가 버튼 등을 클릭할 때 발생하며, 이 이벤트를 통해 특정 동작을 수행할 수 있습니다.
<button
className="button"
onClick={() => {
alert("버튼이 클릭되었습니다.");
}}
>
클릭
</button>2.2 onMouseEnter와 onMouseLeave 이벤트 예시
onMouseEnter 이벤트는 사용자가 마우스를 요소 위에 올릴 때, onMouseLeave 이벤트는 요소에서 마우스를 내릴 때 발생합니다.
<div
onMouseEnter={() => {
console.log("마우스가 요소 위에 있습니다.");
}}
onMouseLeave={() => {
console.log("마우스가 요소를 떠났습니다.");
}}
>
마우스를 올리거나 내려보세요
</div>3. 키보드 이벤트: onKeyDown, onKeyPress, onKeyUp
<키보드 이벤트란?>
키보드 이벤트는 사용자가 키보드를 통해 입력할 때 발생합니다. onKeyDown, onKeyPress, onKeyUp 이벤트를 통해 키보드 입력을 처리할 수 있습니다.
3.1 키보드 이벤트 예시
- onKeyDown: 키를 누르는 순간 발생
- onKeyPress: 키를 누르고 있을 때 발생
- onKeyUp: 키를 뗄 때 발생
<input
type="text"
onKeyDown={() => {
console.log("키를 눌렀습니다.");
}}
onKeyPress={() => {
console.log("키를 누르고 있습니다.");
}}
onKeyUp={() => {
console.log("키를 뗐습니다.");
}}
/>4. 포커스 이벤트: onFocus와 onBlur
<포커스 이벤트란?>
포커스 이벤트는 사용자가 입력 필드에 포커스를 줄 때(onFocus)와 포커스를 잃을 때(onBlur) 발생하는 이벤트입니다.
4.1 포커스 이벤트 예시
<input
type="text"
className="input"
onFocus={() => {
console.log("포커스가 되었습니다.");
}}
onBlur={() => {
console.log("포커스가 해제되었습니다.");
}}
/>위 예제에서는 사용자가 입력 필드에 포커스를 줄 때와 해제할 때 각각 콘솔에 메시지를 출력합니다.
5. 드래그 이벤트
<드래그 이벤트란?>
드래그 이벤트는 사용자가 요소를 드래그할 때 발생합니다. React에서 드래그 가능하도록 설정된 요소에
onDragStart와onDragEnd이벤트를 추가하여 드래그 시작과 종료 시의 동작을 정의할 수 있습니다.
5.1 드래그 이벤트 예시
<div
className="draggable"
draggable
onDragStart={() => {
console.log("드래그 시작");
}}
onDragEnd={() => {
console.log("드래그 종료");
}}
>
드래그 가능한 요소
</div>이 코드에서는 사용자가 요소를 드래그하기 시작할 때와 드래그를 종료할 때 각각 콘솔에 메시지를 출력합니다.
6. 스타일링: index.css 파일 설명
위 코드에서 사용된 스타일링은 index.css 파일에 정의되어 있습니다. 이제 이 CSS 파일의 내용을 살펴보겠습니다.
코드
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Google Fonts 임포트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
/* 전체적인 폰트 적용 */
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
background-color: #f5f5f5;
}
/* h1 태그 스타일 */
.heading {
font-family: 'Noto Sans', sans-serif;
}
/* 버튼 스타일 */
.button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
/* 인풋 스타일 */
.input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
transition: border-color 0.3s ease;
}
.input:focus {
border-color: #007BFF;
}
/* 드래그 가능한 요소 스타일 */
.draggable {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
transition: transform 0.2s ease-in-out;
}
.draggable:hover {
transform: scale(1.05);
}스타일링 설명
-
폰트 및 Tailwind CSS 설정: @tailwind base, @tailwind components, @tailwind utilities 구문은 Tailwind CSS의 기본 설정을 불러옵니다. 또한, Google Fonts에서 Noto Sans 폰트를 임포트하여 전체적인 타이포그래피를 설정합니다.
-
body 스타일: body 태그에 폰트를 적용하고, 기본 여백을 제거하며 배경색을 설정합니다.
-
h1 태그 스타일: .heading 클래스는 Noto Sans 폰트를 적용하여 일관된 스타일을 유지합니다.
-
버튼 스타일: .button 클래스는 버튼의 기본 스타일을 설정합니다. 배경색, 텍스트 색상, 패딩, 경계선, 그리고 hover 상태에서의 색상 변화를 설정하여 버튼이 더욱 인터랙티브하게 보이도록 합니다.
-
인풋 스타일: .input 클래스는 텍스트 입력 필드의 기본 스타일을 설정합니다. 특히, 사용자가 입력 필드에 포커스했을 때 경계선 색상이 바뀌도록 설정하여 사용자 경험을 개선합니다.
-
드래그 가능한 요소 스타일: .draggable 클래스는 드래그할 수 있는 요소의 스타일을 정의합니다. 요소의 크기, 배경색, 그림자, hover 상태에서의 크기 변화를 통해 드래그 가능한 요소임을 시각적으로 나타냅니다.
포...포기는 배추썰때 하는말! 라이트웨잇 베이베~! 💪
마무리하며...
이번에는 React에서 다양한 이벤트 핸들링 방법과 CSS를 활용한 스타일링에 대해 알아보았습니다. React는 컴포넌트 기반의 UI 라이브러리로서, 이러한 이벤트 처리와 스타일링이 중요한 역할을 합니다. 특히, 각종 사용자 인터랙션을 다루는 이벤트 핸들링을 통해 보다 직관적이고 사용성 좋은 애플리케이션을 만들 수 있습니다.
