상태변수 state
: 컴포넌트 내부에서 읽고 업데이트 할 수 있는 값
상태 변수의 값이 변경되면 리렌더링이 발생
클래스형 컴포넌트는 setState() 메소드를 이용, 함수형 컴포넌트는 useState() 훅 함수가 반환하는 함수를 이용해서 값을 변경해야 함
1. 클래스형 컴포넌트
App.js
import Counter from './Counter';
function App(){
return(
<>
<Counter />
</>
);
}
export default App;
1) 클래스형 컴포넌트에서 state 사용
import { Component } from 'react';
class Counter extends Component{
constructor(props){
super(props);
this.state = {
number : 0
}
};
render(){
return(
<>
<h1> {this.state.number} </h1>
<button onClick={ () => {this.setState({number : this.state.number +1});
console.log(this.state.number);
}}> +1 </button>
</>
);
};
};
export default Counter;
화면 : 버튼 클릭할 때마다 숫자가 증가함
console : 업데이트 이전의 값이 출력됨
2) 상태변수 setState() 를 사용하지않고, 변경하는 형태로 코드를 수정
<button onClick={ () => {
console.log(this.state.number);
// this.setState({number : this.state.number +1});
this.state.number = this.state.number +1;
console.log(this.state.number);
}}> +1 </button>
화면 : 버튼 클릭할 때마다 숫자가 증가하지않음
console : 업데이트 이전의 값과 클릭후 증가된 값이 변경됨을 확인
3) number 변수를 상태변수가 아닌 일반변수로 변경
import { Component } from 'react';
class Counter extends Component{
number = 0;
render(){
return(
<>
<h1> {this.number} </h1>
<button onClick={ () => {
console.log(this.number);
this.number = this.number +1;
console.log(this.number);
}}> +1 </button>
</>
);
};
};
export default Counter;
화면 : 버튼 클릭할 때마다 숫자가 증가하지않음
console : 업데이트 이전의 값과 클릭후 증가된 값이 변경됨을 확인
=> 상태변수를 사용하는 이유
: 변수의 값 변화가 화면에 반영되어야 하는 경우 상태변수를 사용하고,
이때 상태변수의 값 변경을 위해서는 setState() 를 이용해야함
4) 상태변수를 지역변수로 재정의해서 사용
import { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: 0 // 상태변수이름 : 상태변수초기값
};
}
render() {
// 상태 변수가 하나 또는 개수가 적다면 아래와 같이 직접 선언
// const number = this.state.number;
// 일반적으로 객체 비구조화를 이용해서 상태변수의 값을 분해해서 지역변수로 할당
const { number } = this.state;
return (
<>
{/* 상태변수의 값을 출력 */}
<h1>{number}</h1>
{/* 버튼을 하나 추가해서 해당 버튼을 클릭할 때 마다 상태변수의 값을 하나씩 증가 */}
<button onClick={() => {
console.log("Before:", number);
this.setState({ number: number + 1 });
console.log("After:", number);
}}>하나 증가</button>
</>
);
}
}
export default Counter;
setState()
: 컴포넌트 state의 변경사항을 대기열에 집어넣고, React에 해당 컴포넌트와 자식들이 갱신된 state를 사용하여 다시 렌더링 되어야한다고 알려줌
컴포넌트를 갱신하는 데에 있어 즉각적인 명령이 아닌 요청임.
1. 클래스형 컴포넌트
1) updater 함수 이용 => setState(updater[,callback])
<button onClick={ () => {
console.log(number);
// this.setState({ number: number + 1 });
this.setState(currentState => ({number : currentState.number+1})); //update 함수 이용
console.log(number);
}}> +1 </button>
화면 : 버튼 클릭할 때마다 숫자가 증가함
console : 업데이트 이전의 값이 출력됨
2) 변경객체를 전달하는 방법 => setState(stateChange[,callback])
<button onClick={ () => {
console.log(number);
// this.setState({ number: number + 1 });
this.setState(currentState => ({number : currentState.number+1}),
()=> console.log(this.state.number)
); //update 함수 이용
}}> +1 </button>
화면 | console | |
+1 증가 | before= after | this.setState({num : num +1}); this.setState({num : num +1}); this.setState({num : num +1}); |
+3 증가 | before = after | this.setState(curNum => ({num: curNum.num+1})); this.setState(curNum => ({num: curNum.num+1})); this.setState(curNum => ({num: curNum.num+1})); |
+3 증가 | before ≠ after(+3) | this.setState(curNum => ({num: curNum.num+1}), ()=> console.log(this.state.num) ); |
2. 함수형 컴포넌트
import { useState } from 'react';
function Counter(){
const {number, setCount} = useState('');
return(
<>
<h1> {number} </h1>
<button onClick={
()=>setCount(number+1)
}> +1 </button>
</>
);
};
export default Counter;
클래스 Component | 함수형 Component |
this.setState(curState => ({num : curState.num +1})); | const {num , setNum} = useState(''); () => setNum(num + 1) |
'React' 카테고리의 다른 글
React - Ref (0) | 2023.10.25 |
---|---|
React - 이벤트 핸들링 (0) | 2023.10.24 |
React Practice - 함수형 Component 사용하여 생성한 신호등 클래스형 Component로 변경해보기 (0) | 2023.10.23 |
React Practice - 함수형 Component 사용하여 _ 신호등 만들기 (0) | 2023.10.23 |
React - 클래스형 컴포넌트 / 함수형 컴포넌트 / Props (0) | 2023.10.21 |