# Goals
- Understand the concept of state in web apps
- Learn how to build state in React
- Use events to trigger state changes
# State in General
- In any advanced web app, the user interface has to be stateful.
- ex)
- logged-in users see a different screen
- click modal or pop-up window
- section that expand or collapse, instead of clicking "new page"
* state of the client interface(front-end) is NOT always directly tied to state of the server.
# State Changes
- State is designed to constantly change in response to events.
## What does state track
- UI logic - change state of interface ex) modal open for editing profile
- Business logic - change state of data ex) new messages in my inbox -> this effects how they display
# What does state track?
- UI logic
- Business logic
# CORE REACT CONCEPT
## Component
### DATA + UI
- building block of React
- combine logic (JS) and presentation (JSX)
## Prop
- data passed to a component (or found via defalts)
- immutable; component cannaot change its own props
## State
- internal data specific to a component
- data can be changed over time!
## What is React State?
- In React, state is an INSTANCE ATTRIBUTE on a component.
- It is always an object (POJO);{key:value}
## Initial State : React Constructor Function
- state should be initialized as soon as the component is created.
- so, we set it in the constructor function
constructor(props){
super(props);
this.state = {
/* values we want to track */
};
}
- Constructor takes one argument, PROPS!
- You must call [Super(props)] at start of constructor, which "registers" your class as a React Component
import React, { Component } from 'react';
class Game extends Component {
constructor(props) {
super(props);// we need super for approaching to props
this.state = {
score: 99,
gameOver: false
};
}
render() {//don't set a state in render part
return (
<div>
<h1>Your Score is : {this.state.score}</h1>
</div>
);
}
}
export default Game;
## Changing State
- DO NOT CHANGE STATES DIRECTLY ex) this.state.num=0;
- [this.setState({stateKey:stateValue})] is the built-in React method of changing a component's state
ex)
this.setState({playerName: "Matt", score: "99"});
- Can call in any instance method except the constructor
- Take an object describing the state change
- Patches state obj ; keys that you didn't specify don't change
- Asynchronize! ( the component state will be updated eventually, but React controls WHEN the state will actually change, for performance reasons.)
- Components are re-render when states are updeted
import React, { Component } from 'react'
class Rando extends Component {
constructor(props) {
super(props);
this.state = { num: 0 };
this.makeTimer();
}
makeTimer() {
setInterval(() => {
let rand = Math.floor(Math.random() * this.props.maxNum);
this.setState({ num: rand })
}, 1000);
}
render() {
//everytime num state is changed render is called again, again
console.log('changing!'); //콘솔에서 확인 가능
return <h1>{this.state.num}</h1>
}
}
export default Rando;