[React] 이벤트와 State

웹 페이지에서는 사용자의 다양한 행동에 따라 특정 작업을 수행해야 한다.

예를 들어 버튼을 클릭하거나, 마우스를 올리거나, 요소를 드래그하는 등의 행동이 발생할 수 있다.

React에서는 이러한 사용자 행동을 이벤트(Event)라고 하고, 이벤트가 발생했을 때 실행할 함수를 이벤트 핸들러(Event Handler)라고 한다.

이번에는 React에서 이벤트를 처리하는 방법과 useState를 이용하여 데이터가 변경되었을 때 화면을 다시 업데이트하는 방법을 알아보자.

1. 이벤트와 이벤트 핸들러

사용자가 웹 페이지에서 수행하는 행동을 이벤트라고 한다.

대표적인 이벤트는 다음과 같다.

• 버튼 클릭
• 마우스 호버
• 드래그
• 키보드 입력

예를 들어 사용자가 버튼을 클릭하는 것은 클릭 이벤트이다.

React에서는 onClick을 이용하여 클릭 이벤트가 발생했을 때 실행할 코드를 지정할 수 있다.

<button onClick={() => {
    console.log("버튼을 클릭했습니다.");
}}>
    버튼
</button>

버튼을 클릭하면 onClick에 등록된 함수가 실행된다.

 

이벤트가 발생했을 때 실행되는 함수를 이벤트 핸들러라고 한다.

onClick은 클릭 이벤트를 처리하기 위한 속성이고, 그 안에 작성한 함수가 이벤트 핸들러이다.

 

3. 일반 변수의 값을 변경하면 화면도 바뀔까?

이번에는 버튼을 클릭할 때마다 숫자를 증가시키는 기능을 만들어 보았다.

function App() {
    let number = 0;

    return (
        <>
            <button
                className="border-1 p-2 rounded"
                onClick={() => {
                    number++;
                    console.log(number);
                }}
            >
                버튼
            </button>

            <div>{number}</div>
        </>
    );
}

버튼을 클릭하면 number의 값은 실제로 증가한다.

콘솔을 확인하면

1
2
3
4
...

와 같이 출력된다.

하지만 화면에 표시된 숫자는 0에서 변경되지 않는다.

 

브라우저는 JavaScript 변수의 값이 변경되었다고 해서 화면을 자동으로 다시 그려주지 않는다.

화면을 처음 렌더링할 때 현재 데이터를 이용하여 UI를 만들고, 이후 데이터가 변경되더라도 화면을 다시 업데이트하는 과정이 필요하다.

React는 이러한 화면 업데이트를 보다 쉽게 관리할 수 있도록 State라는 개념을 제공한다.

4. React의 State

React에서는 화면에 영향을 주는 데이터를 State로 관리할 수 있다.

State의 값이 변경되면 React가 해당 State를 사용하는 UI를 다시 렌더링한다.

즉, 일반 변수와 달리 State를 사용하면 데이터가 변경되었을 때 화면 업데이트를 React가 처리할 수 있다.

State는 useState라는 React Hook을 사용하여 만들 수 있다.

const [number, setNumber] = useState(0);

여기서 각각의 의미는 다음과 같다.

number
→ 현재 State 값

setNumber
→ State 값을 변경하는 함수

0
→ State의 초기값

따라서 처음에는 number의 값이 0이다.

6. useState를 사용하여 숫자 변경하기

앞에서 작성했던 코드를 useState를 사용하도록 변경해 보자.

import { useState } from "react";

function App() {
    const [number, setNumber] = useState(0);

    return (
        <>
            <button
                className="border-1 p-2 rounded"
                onClick={() => {
                    setNumber(number + 1);
                }}
            >
                버튼
            </button>

            <div>{number}</div>
        </>
    );
}

이제 버튼을 클릭할 때마다 화면의 숫자가 변경된다.

따라서 State를 사용하면 UI와 관련된 데이터가 변경되었을 때 React가 화면을 다시 렌더링하도록 만들 수 있다.

7. setNumber를 사용해야 하는 이유

State를 사용할 때는 State 변수 자체를 직접 변경하는 것이 아니라 State 변경 함수를 사용해야 한다.

setNumber(number + 1);

여기서 setNumber가 State 값을 변경하고 React가 다시 렌더링할 수 있도록 한다.

반면 다음과 같이 직접 값을 변경하는 방식은 사용하지 않는다.

number++;

State는 단순히 값을 저장하는 것뿐만 아니라 값이 변경되었음을 React에 알려 화면을 업데이트하도록 하는 역할도 하기 때문이다.

따라서 React에서는 다음과 같은 흐름으로 State를 변경한다.

사용자 행동
    ↓
이벤트 발생
    ↓
이벤트 핸들러 실행
    ↓
setNumber() 호출
    ↓
State 변경
    ↓
React가 컴포넌트 다시 렌더링
    ↓
변경된 값으로 UI 업데이트