-
React에서 상태 관리
React에서 상태 관리는 컴포넌트의 동적인 UI 변화를 처리하기 위해 필수적인 부분입니다. 상태 관리는 클래스형 컴포넌트와 함수형 컴포넌트에서 각각 다르게 구현됩니다. -
함수형 컴포넌트에서의 상태 관리
useState 훅을 사용하여 상태를 관리합니다. 아래는 버튼의 활성화/비활성화를 관리하는 코드 예제입니다.
import React, { useState } from "react";
function ConfirmButton(props) {
const [isConfirmed, setIsConfirmed] = useState(false);
const handleConfirm = () => {
setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
};
return (
<button onClick={handleConfirm} disabled={isConfirmed}>
{isConfirmed ? "확인됨" : "확인하기"}
</button>
);
}
export default ConfirmButton;
특징:
useState를 사용하여 상태 변수를 정의하고, 상태를 업데이트하는 함수(setIsConfirmed)를 제공합니다.
상태 업데이트는 prevIsConfirmed 값을 기반으로 반전(true ↔ false)시킵니다.
함수형 컴포넌트는 훨씬 간결하며, this나 바인딩을 신경 쓸 필요가 없습니다.
오늘 공부한 내용 요약: React에서 상태 관리 및 함수형 컴포넌트와 클래스형 컴포넌트 비교
1. React에서 상태 관리
React에서 상태 관리는 컴포넌트의 동적인 UI 변화를 처리하기 위해 필수적인 부분입니다. 상태 관리는 클래스형 컴포넌트와 함수형 컴포넌트에서 각각 다르게 구현됩니다.
- 함수형 컴포넌트에서의 상태 관리
useState 훅을 사용하여 상태를 관리합니다. 아래는 버튼의 활성화/비활성화를 관리하는 코드 예제입니다.
javascript
코드 복사
import React, { useState } from "react";
function ConfirmButton(props) {
const [isConfirmed, setIsConfirmed] = useState(false);
const handleConfirm = () => {
setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
};
return (
<button onClick={handleConfirm} disabled={isConfirmed}>
{isConfirmed ? "확인됨" : "확인하기"}
</button>
);}
export default ConfirmButton;
특징:
useState를 사용하여 상태 변수를 정의하고, 상태를 업데이트하는 함수(setIsConfirmed)를 제공합니다.
상태 업데이트는 prevIsConfirmed 값을 기반으로 반전(true ↔ false)시킵니다.
함수형 컴포넌트는 훨씬 간결하며, this나 바인딩을 신경 쓸 필요가 없습니다.
3. 클래스형 컴포넌트에서의 상태 관리
클래스형 컴포넌트는 this.state와 this.setState를 사용하여 상태를 관리합니다. handleConfirm 메서드는 상태를 업데이트하고 버튼의 활성화/비활성화를 제어합니다.
import React from "react";
class ConfirmButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isConfirmed: false, // 초기 상태
};
}
handleConfirm = () => {
this.setState((prevState) => ({
isConfirmed: !prevState.isConfirmed, // 상태 반전
}));
};
render() {
return (
<button
onClick={this.handleConfirm}
disabled={this.state.isConfirmed}
>
{this.state.isConfirmed ? "확인됨" : "확인하기"}
</button>
);
}
}
export default ConfirmButton;
특징:
상태는 this.state에서 초기화되고, this.setState를 사용하여 업데이트됩니다.
메서드 바인딩(bind)이나 화살표 함수(=>)로 this 컨텍스트를 관리해야 합니다.
- 함수형 vs 클래스형 컴포넌트 비교
특징 함수형 컴포넌트 클래스형 컴포넌트
상태 관리 useState 훅 사용 this.state와 this.setState 사용
코드 간결성 코드가 간결하고 직관적임 코드가 비교적 길고 this 바인딩 필요
성능 React 16.8 이후 최적화 가능 일부 비효율적 작업 발생 가능
러닝 커브 배우기 쉽고 최신 React 방식 비교적 복잡, 신규 프로젝트에선 잘 사용되지 않음
- 오늘의 핵심 요약
React에서 상태 관리는 UI의 동적인 동작을 제어하는 핵심입니다.
최신 React에서는 useState를 활용한 함수형 컴포넌트를 사용하는 것이 권장됩니다.
기존의 클래스형 컴포넌트는 유지보수를 위해 여전히 사용되지만, 새로운 프로젝트에서는 함수형 컴포넌트와 훅 기반 설계가 표준입니다.
함수형 컴포넌트로 리팩터링한 결과, 코드가 훨씬 간결해지고 가독성이 향상되었습니다
Handling events
- React 이벤트 핸들링 기본 개념
React에서 이벤트 핸들링은 DOM 이벤트와 유사하지만, 일부 문법적 차이가 있습니다:
이벤트 이름은 카멜 케이스로 작성합니다. (예: onClick, onChange)
이벤트 핸들러는 함수로 전달합니다. (문자열 사용 불가)
- 함수형 컴포넌트의 이벤트 핸들링
함수형 컴포넌트에서는 이벤트 핸들러를 간단하게 작성할 수 있습니다.
예제:
import React, { useState } from "react";
function ConfirmButton() {
const [isConfirmed, setIsConfirmed] = useState(false);
const handleConfirm = () => {
setIsConfirmed((prevState) => !prevState); // 상태 반전
};
return (
<button onClick={handleConfirm} disabled={isConfirmed}>
{isConfirmed ? "확인됨" : "확인하기"}
</button>
);
}
export default ConfirmButton;
특징:
onClick 이벤트에 handleConfirm 함수를 전달.
useState로 상태를 관리하며 버튼 클릭 시 상태가 업데이트됨.
3. 클래스형 컴포넌트의 이벤트 핸들링
클래스형 컴포넌트에서는 이벤트 핸들러로 클래스 메서드를 사용합니다. 하지만 메서드 내부에서 this가 컴포넌트를 참조해야 하므로, 바인딩이 필요합니다.
예제:
import React from "react";
class ConfirmButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isConfirmed: false,
};
this.handleConfirm = this.handleConfirm.bind(this); // 바인딩
}
handleConfirm() {
this.setState((prevState) => ({
isConfirmed: !prevState.isConfirmed, // 상태 반전
}));
}
render() {
return (
<button
onClick={this.handleConfirm}
disabled={this.state.isConfirmed}
>
{this.state.isConfirmed ? "확인됨" : "확인하기"}
</button>
);
}
}
export default ConfirmButton;바인딩 방법:
constructor에서 bind 메서드 사용
또는 화살표 함수(=>)를 사용하여 this를 자동으로 바인딩
화살표 함수로 수정:
handleConfirm = () => {
this.setState((prevState) => ({
isConfirmed: !prevState.isConfirmed,
}));
};
- 이벤트 객체(Event Object) 사용
React 이벤트 핸들러는 브라우저의 네이티브 이벤트를 래핑한 SyntheticEvent를 제공합니다. 이벤트 객체는 일반 이벤트처럼 사용 가능합니다.
예제:
function HandleEventExample() {
const handleClick = (event) => {
console.log(event.target); // 클릭된 요소
console.log(event.type); // 이벤트 타입 (예: 'click')
};
return <button onClick={handleClick}>클릭하세요</button>;
}- 이벤트 핸들링의 주요 패턴
상태 기반 동작: 버튼 클릭으로 상태를 변경하여 UI를 업데이트합니다.
const [count, setCount] = useState(0);
const handleIncrement = () => setCount(count + 1);
return <button onClick={handleIncrement}>Count: {count}</button>;매개변수 전달: 이벤트 핸들러에 매개변수를 전달하려면 화살표 함수를 사용합니다.
const handleClick = (name) => {
console.log(`${name} 클릭됨`);
};
return (
<button onClick={() => handleClick("버튼1")}>
버튼1
</button>
);기본 동작 방지: 이벤트 객체의 preventDefault()를 사용하여 기본 동작을 막을 수 있습니다.
const handleSubmit = (event) => {
event.preventDefault(); // 폼 제출 방지
console.log("폼 제출됨");
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">제출</button>
</form>
);- React의 이벤트 처리 특징
React의 이벤트는 브라우저 이벤트와 동일하게 동작하지만, SyntheticEvent로 래핑되어 React 환경에 최적화.
React의 이벤트 시스템은 버블링(Propagation)을 지원하며, stopPropagation()으로 버블링을 중단 가능.
