React에서 이벤트를 처리하는 방법과 state로 상태를 관리하는 방법, 그리고 state와 props에 대해 디테일하고 꼼꼼하게 알아보겠습니다. React를 사용하면서 반드시 이해해야 할 핵심 개념들이니 천천히 따라와 주세요.
1. 이벤트 처리하기
React에서 이벤트 처리는 HTML의 DOM 이벤트 처리와 유사하지만 몇 가지 중요한 차이점이 있습니다.
1.1 이벤트 이름의 표기법
- React: 이벤트 이름은 카멜케이스(camelCase) 를 사용합니다.
- HTML: 이벤트 이름은 소문자로 작성됩니다.
// React
<button onClick={handleClick}>클릭</button>
// HTML
<button onclick="handleClick()">클릭</button>1.2 이벤트 핸들러 전달 방식
- React: 이벤트 핸들러로 함수를 전달합니다.
- HTML: 문자열로 이벤트 핸들러를 전달합니다.
// React
<button onClick={handleClick}>클릭</button>
// HTML
<button onclick="handleClick()">클릭</button>1.3 이벤트 핸들러 정의하기
이벤트 핸들러는 컴포넌트 내에서 함수로 정의합니다.
function handleClick() {
console.log('버튼이 클릭되었습니다.');
}클래스 컴포넌트에서는 다음과 같이 정의합니다.
class MyComponent extends React.Component {
handleClick() {
console.log('버튼이 클릭되었습니다.');
}
render() {
return <button onClick={this.handleClick}>클릭</button>;
}
}주의: 클래스 컴포넌트에서 this를 사용하려면 바인딩이 필요합니다. 또는 화살표 함수를 사용하여 자동으로 바인딩할 수 있습니다.
1.4 이벤트 객체 사용하기
React의 이벤트 객체는 브라우저 간 호환성을 보장하는 SyntheticEvent입니다.
function handleClick(event) {
console.log(event.target); // 클릭된 요소
}1.5 기본 동작 방지 및 이벤트 전파
function handleClick(event) {
event.preventDefault(); // 기본 동작 방지
event.stopPropagation(); // 이벤트 전파 방지
}2. State로 상태 관리하기
state는 컴포넌트의 동적인 데이터를 관리하기 위해 사용됩니다.
2.1 State 선언하기
함수형 컴포넌트에서 useState 훅 사용
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
// ...
}클래스 컴포넌트에서 state 초기화
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
// ...
}2.2 State 업데이트하기
함수형 컴포넌트
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
// ...
}클래스 컴포넌트
class Counter extends React.Component {
// ...
increment = () => {
this.setState({ count: this.state.count + 1 });
};
// ...
}2.3 State 업데이트의 비동기성
setState는 비동기적으로 동작할 수 있습니다. 따라서 이전 상태 값을 기반으로 새로운 상태를 계산해야 할 때는 함수를 인자로 전달합니다.
함수형 컴포넌트에서 함수형 업데이트
setCount(prevCount => prevCount + 1);클래스 컴포넌트에서 함수형 업데이트
this.setState(prevState => ({
count: prevState.count + 1
}));2.4 여러 개의 State 관리하기
useState를 여러 번 호출하여 여러 개의 상태를 관리할 수 있습니다.
function Form() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
// ...
}3. State와 Props
3.1 State란 무엇인가?
- 정의: state는 컴포넌트 내에서 관리되는 동적인 데이터입니다.
특징
- 변경될 수 있음
- 컴포넌트 내부에서 선언 및 사용
- 상태가 변경되면 컴포넌트는 재렌더링됨
3.2 Props란 무엇인가?
- 정의: props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다.
특징
- 읽기 전용 (immutable)
- 컴포넌트 간 데이터 전달에 사용
- 자식 컴포넌트는 props를 변경할 수 없음
3.3 State와 Props의 차이점
3.4 코드로 이해하기
부모 컴포넌트에서 자식 컴포넌트로 Props 전달
function ParentComponent() {
const [message, setMessage] = useState('안녕하세요');
return (
<div>
<ChildComponent message={message} />
<button onClick={() => setMessage('반갑습니다')}>메시지 변경</button>
</div>
);
}
function ChildComponent({ message }) {
return <h1>{message}</h1>;
}ParentComponent는 message라는 state를 가지고 있습니다.
이 message를 ChildComponent에 props로 전달합니다.
ChildComponent는 전달받은 message를 화면에 출력합니다.
State 변경으로 인한 재렌더링
버튼을 클릭하여 setMessage로 state를 변경하면, ParentComponent와 ChildComponent가 재렌더링됩니다.
하지만 ChildComponent는 props로 전달받은 message를 표시할 뿐, 이를 변경할 수는 없습니다.
4. 종합 정리
4.1 이벤트 처리 정리
- 이벤트 이름은 카멜케이스로 작성합니다.
- 이벤트 핸들러로 함수를 전달합니다.
- 이벤트 객체를 통해 추가 정보를 얻을 수 있습니다.
4.2 상태 관리 정리
- state는 컴포넌트 내부에서 선언하고 관리합니다.
- setState 또는 setCount 등의 함수로 상태를 업데이트합니다.
- 상태 업데이트는 비동기적으로 처리될 수 있으므로 함수형 업데이트를 활용합니다.
4.3 State와 Props 정리
- State는 컴포넌트 내부에서 관리되며 변경될 수 있습니다.
- Props는 부모 컴포넌트로부터 전달되며 변경할 수 없습니다.
- 컴포넌트 간에는 props로 데이터를 전달하고, 컴포넌트 내부에서는 state로 상태를 관리합니다.
끝으로
React에서 이벤트 처리와 상태 관리는 매우 중요한 개념입니다. 또한 state와 props의 차이를 명확히 이해하는 것은 React로 효율적인 컴포넌트를 설계하는 데 큰 도움이 됩니다.
이 포스팅이 React를 이해하는 데 도움이 되셨길 바라며, 궁금한 점이나 추가로 알고 싶은 내용이 있다면 댓글로 남겨주세요. 감사합니다!
