[React] 3장 이벤트 처리

1. 컴포넌트 파일 생성

src 폴더 내 Event.js라는 파일을 생성해줍니다.

src/
└─2.Event
└─-- index.js

 

index.js에 클릭 이벤트 핸들러를 작성해주고 버튼을 클릭시 클릭한 수만큼 +1하는 코드를 작성해보겠습니다.

import React, { useState } from 'react'

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

    // 클릭 이벤트 처리
    const handleClick = () => {
        setCount(count + 1);
    }

  return (
    <div>
        <h1>클릭 수: {count} </h1>
        <button onClick={handleClick}>증가</button>
    </div>
  )
}

export default Event;

• useState 훅을 사용해 클릭 수를 관리
• handleClick함수는 버튼이 클릭될 때마다 클릭 수를 증가시키는 역할
• 버튼의 onClick 속성에 handleClick 함수를 연결

---

2. 입력 필드를 추가해 사용자 입력을 처리하기

입력 필드를 추가해 사용자가 입력한 값을 처리하는 코드를 작성할 수 있습니다. 우선 src 폴더안에 EventComponent.js파일을 생성해줍니다.

import React, {useState} from 'react'

export const FieldEvent = () => {
   const [count, setCount] = useState(0);
   const [inputValue, setinputValue] = useState('');

   const handleClick = () => {
      setCount(count + 1);
   }
   
   const handleInput = (e) => {
      setinputValue(e.target.value);
   }

  return (
    <div>
        <h1>클릭 수: {count}</h1>
        <button onClick={handleClick}>클릭</button>
        <br />
        <br />
        <hr />
        <input 
        type="text"
        value={inputValue}
        onChange={handleInput}
        placeholder="입력할 값을 넣어주세요"
        />
        <p>입력 값: {inputValue}</p>
    </div>
  )
}

---

 

GitHub - Koras02/react-bloging: https://thinky.tistory.com/category/Front-End/ReactJS