Introducing State

# 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;