리액트는 사용자 인터페이스를 구축하기 위한 아주 강력한 라이브러리입니다. 그 가운데에서도
상태 관리(state management)와 이벤트 처리(event handling)는
리액트 애플리케이션을 만드는 데 있어 필수적인 개념입니다. 이 글에서는 상태 관리와
이벤트 처리의 개념, 어떻게 리액트 컴포넌트에서 이러한 기능들을 활용할 수 있는지에 대해
심도 있게 알아보겠습니다.
상태 관리 (State)
상태(state)는 리액트 컴포넌트 내에서 데이터의 현재 값을 나타냅니다.
컴포넌트가 동적 사고방식을 가지려면, 상태는 불가결한 요소입니다.
상태가 변경될 때마다 리액트는 다시 렌더링하여 사용자에게 최신 정보를 제공합니다.
상태의 정의
컴포넌트의 상태는 주로 useState 훅을 통해 정의됩니다.
useState는 컴포넌트 내에서 상태 변수를 선언하고, 업데이트할 수 있는
함수를 반환합니다. 다음은 간단한 카운터 예제입니다.
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
카운터: {count}
);
};
export default Counter;
위 예제에서 useState를 통해 상태 변수 count와
해당 변수를 업데이트할 수 있는 setCount 함수를 선언하였습니다.
버튼 클릭 시 증가 및 감소 함수를 통해 count의 값을 변경합니다.
이벤트 처리 (Event Handling)
리액트에서는 DOM 요소에 이벤트 처리를 쉽게 연결할 수 있습니다.
이벤트는 사용자의 입력(클릭, 키 입력 등)에 반응하도록 컴포넌트를 설정하는 방법입니다.
이벤트는 JSX 문법을 통해 전달되며, 각 이벤트는 소문자로 시작하고
onEventName 형태로 바인딩됩니다.
이벤트 바인딩
리액트에서 이벤트를 처리할 때, 반드시 바인딩(binding)이라는 과정을 거쳐야 합니다.
이는 대부분의 경우 this 키워드의 활용과 관련이 있습니다.
클래스 컴포넌트에서는 다음과 같은 방식으로 이벤트를 바인딩할 수 있습니다.
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('버튼 클릭됨');
}
render() {
return (
);
}
}
클래스 컴포넌트를 사용할 경우, 메서드에서 this를 사용하기 때문에
해당 메서드를 생성자에서 바인딩해 주어야 합니다.
하지만 함수형 컴포넌트와 화살표 함수를 활용하면 별도의 바인딩이 필요하지 않습니다.
함수형 컴포넌트와 화살표 함수 사용 예제
const Button = () => {
const handleClick = () => {
alert('버튼 클릭됨');
};
return (
);
};
위 코드에서 handleClick 함수는 화살표 함수로 정의되어
this의 바인딩을 걱정할 필요가 없습니다.
상태와 이벤트 처리의 결합
상태 관리와 이벤트 처리의 가장 큰 장점은 이 둘을 결합할 수 있다는 점입니다.
사용자가 버튼을 클릭할 때 상태를 업데이트하고, 이를 통해 UI가 자동으로 갱신될 수 있습니다.
아래 예제에서는 상태와 이벤트 처리를 결합한 카운터 컴포넌트를 확인해보세요.
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return (
카운터: {count}
);
};
export default Counter;
이벤트 객체
이벤트 핸들러에 전달되는 매개변수로 event 객체를 사용할 수 있습니다.
이 객체는 발생한 이벤트에 대한 정보와 함께 객체 프로퍼티를 포함합니다.
예를 들어, 사용자가 입력한 내용을 읽거나, 이벤트의 기본 동작을 막을 수 있습니다.
const FormComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('입력한 값: ' + inputValue);
};
return (
);
};
위 예제에서 handleChange 함수는 입력 필드의 값이 변경될 때마다
호출되며, event.target.value로 현재 입력 필드의 값을 얻어올 수 있습니다.
handleSubmit는 폼의 제출 시 호출되며, event.preventDefault()를
사용하여 기본 제출 동작을 방지합니다.
최적화 및 성능
상태 관리와 이벤트 처리는 리액트의 성능에 큰 영향을 미칠 수 있습니다.
상태가 변경될 때마다 컴포넌트가 리렌더링 되기 때문에, 최적화가 필요합니다.
불필요한 렌더링을 피하기 위해 React.memo와 useCallback 훅을
활용할 수 있습니다.
import React, { useState, useCallback } from 'react';
const Button = React.memo(({ onClick, label }) => {
console.log('버튼 렌더링됨:', label);
return ;
});
const Counter = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((prev) => prev + 1);
}, []);
const decrement = useCallback(() => {
setCount((prev) => prev - 1);
}, []);
return (
카운터: {count}
);
};
export default Counter;
React.memo는 컴포넌트를 메모이제이션하여 프로퍼티가 변경되지 않는 한
재렌더링을 피하게 해줍니다. useCallback은 함수들을 메모리에 저장하여
의존성이 변경되지 않는 한 동일한 함수를 사용합니다.
결론
리액트의 상태 관리와 이벤트 처리 시스템을 이해하는 것은 효율적인 애플리케이션을 만드는
데 있어 매우 중요합니다. 상태는 컴포넌트의 변화하는 데이터를 나타내며,
이벤트 처리는 사용자의 입력을 기반으로 한 동작을 정의합니다. 이 둘의 유기적인 결합을 통해
리액트 애플리케이션을 더욱 동적이고 사용자 친화적으로 만들 수 있습니다.
위에서 설명한 예제들을 기반으로 더 많은 실험을 통해 리액트의 다양한 기능을
수련해보시기 바랍니다.