다이나믹 데이터를 만들 때 state
와 함께한다.
데이터라는건 있기도하고 없어지기도하고 0이기도하고 엄청 다양한 종류의 것들임.
고정적인 porps
대신 state
가 필요한 이유다.
그러기 위해서는 state
이외에도 class 컴포넌트
가 필요하다.
🌐 문법:
class 이름 extends React.Component{}
state
는 가져온(=상속한) React.Component
에 있다.
function 컴포넌트
와 다르게 return
이 없다.
대신 class 컴포넌트
는 render
메소드를 가지고 있다.
⚠️ render
메소드 안에서는 return
사용할 수 있음
✡ 리액트는 자동적으로 모든 class 컴포넌트의 render메소드를 실행한다는 점!
➡️ state = 변한다
내가 바꿀 데이터는, 변해야할 데이터는 state
안에 넣자구.
class App extends React.Component {
state = {
count: 0
};
render(){
return (
<div>
<h1>숫자: </h1>
<button onClick={this.add}>+</button>
<button onClick={this.minus}>-</button>
</div>
);
}
}
정의한 state
를 render(){}
안에서 표현하려면 요로케:
class App extends React.Component {
state = {
count: 0
};
render(){
return (
<div>
<h1>숫자: {this.state.count}</h1>
<button onClick={this.add}>+</button>
<button onClick={this.minus}>-</button>
</div>
);
}
}
{this.state.count}
를 JSX안에 표현해주면 된다.
바로, render(){} 업데이트를 통해서
바로, setState()를 통해서
setState()
는 새로운 state와 render()를 새롭게 호출한다.
이런 과정을 통해 우리는 data
를 바꾸는 것.
add = () => {
this.state.count = 1;
};
minus = () => {
this.state.count = -1;
});
⚠️ this.state.count = 1;
이런 행위로는 data를 바꿀 수 없다는 점.
↪️ Fix to setState({count=1;})
그러면 render(){}
가 호출되면서 원하는 값으로 데이터를 변경해줄 것이다.
add = () => {
this.setState({
count: this.state.count + 1
})
};
minus = () => {
this.setState({
count: this.state.count -1
})
};
외부 state
에 너무 의존하는 것은 좋지 않다.
리액트는 현재 state
를 함수
로 제공해주고 있다.
add = () => {
this.setState(current => ({
count: current.count + 1
}))
};
minus = () => {
this.setState(current => ({
count: current.count -1
}))
};
매순간 setState()
를 호출할 때마다 리액트는 새로운 state
와 함께 render(){}
을 호출한다.