State의 초기값을 Constructor메서드를 선언하지 않고도 초깃값을 설정할 수 있다.
state = { ... ,...}; 방식으로 초기값 설정이 가능하다.
import React, { Component } from "react";
class Counter extends Component {
state = {//constructor를 선언하지 않고도 state 초기값 설정 가능
number : 0,
fixedNumber : 0
}
render(){
const {number,fixedNumber} = this.state;
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값 : {fixedNumber}</h2>
<button
onClick={()=>{
this.setState({number: number+1});
}}>
+1
</button>
</div>
);
};
}
export default Counter;
This.setState에 객체 대신 함수 인자 전달하기
만약 onclick내에서 this.setState를 두 번 호출하게 될 경우에는 버튼을 클릭하여도 값은 하나만 증가
why? this.setState를 호출한다고 값이 바로 변경되는것이 아니기 때문
this.setState를 할때 함수를 인자로 넣으면 해결 가능하다.
import React, { Component } from "react";
class Counter extends Component {
state = {
number : 0,
fixedNumber : 0
}
render(){
const {number,fixedNumber} = this.state;
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값 : {fixedNumber}</h2>
<button
onClick={()=>{
//만약 onclick내에서 this.setState를 두번 호출하게 될경우에도 버튼을 클릭하여도 값은 하나만 증가
//why?this.setState를 해도 값이 바로 바뀌지 않기 떄문에
//해결책은 this.setState함수를 사용할때 객체대신에 함수를 인자로 넣어주는것
//동작 안한다.
//this.setState({number: number+1});
//this.setState({number: this.state.number+1});
//동작 한다.
// this.setState((prevState,props)=>{//prevState는 기존 상태, props는 현재 지니고 있는 props를 가리킨다.
// return {
// //업데이트 하고 싶은 내용
// }
// })
this.setState(prevState=>{
return {
number:prevState.number +1
}
});
//위 코드와 아래 코드는 완전히 똑같은 기능을 한다.
//아래 코드는 함수에서 바로 객체를 반환한다는 뜻
this.setState(prevState=>({
number:prevState.number +1
}));//화살표 함수에서 값을 바로 반환하고 싶다면 코드블록{}을 생략하면된다.
//ex) const sum = (a,b)=>a+b;
//화살표 함수에서 바로 객체를 반환하도록 했기떄문에 ({ })와 같은 형태로 코드가 이루어짐
}}>
+1
</button>
</div>
);
};
}
export default Counter;
실행 결과
값이 2개씩 잘 증가된다.
this.setState가 끝난 후 특정 작업 실행하기(CallBack)
setState가 끝난 후 특정 작업을 실행하기 위해서는 setState의 두 번째 파라미터로 콜백 함수를 등록하면 된다.
console에서 log 찍는 걸 확인할 수 있다.
import React, { Component } from "react";
//this.setState가 끝난 후 특정 작업 실행
//setState를 사용하여 값을 업데이트 한 뒤 특정 작업을 하고 싶을 경우 setState의 두번째 파라미터로 콜백함수를 등록하여 작업을 처리할수 있다.
class Counter extends Component {
state = {
number : 0,
fixedNumber : 0
}
render(){
const {number,fixedNumber} = this.state;
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값 : {fixedNumber}</h2>
<button
onClick={()=>{
this.setState({
number:number+1
},()=>{
console.log('방금 setState가 호출되었습니다.');
console.log(this.state);
});
}}>
+1
</button>
</div>
);
};
}
export default Counter;
