[React] State와 LifeCycle

State

Object
component의 data를 넣을 공간이 있고 이 데이터는 변할 수 있다.
말하자면 바뀔 여지가 있는 부분.

state에는 수동으로 바뀌는 값만 넣어주기
여러 컴포넌트를 사용할 경우 각각의 state를 갖게 됨.

Props와의 차이

props는 함수 매개변수처럼 component에 전달되는 반면 state는 함수 내에 선언된 변수처럼 component 안에서 관리된다.

State update

class App extends React.Component {
  state = {
    count: 0
  };

  add = () => {
    this.state.count = 1;
  };
  minus = () => {
    this.state.count = -1;
  };

  render(){
    return (
      <div>
        <h1>The number is : {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

• add, minus 함수에서 count의 값을 변경하고 있지만 결과는 동작하지 않는다.

동작하지 않는 이유❓

react가 render function을 refresh하지 않기 때문이다.
state의 상태가 변경될때마다 react가 render function을 호출해서 바꿔주길 원한다면 setState를 사용해야한다.

setState

component의 state 객체에 대한 업데이트를 실행

setState를 사용해야하는 이유❓

setState를 사용하지 않으면 새 state와 함께 render fucntion이 호출되지 않는다.
매순간 setState를 호출할때마다 react는 새로운 state와 함께 render function을 함께 호출한다.

class App extends React.Component {
  state = {
    count: 0
  };

  add = () => {
    this.setState(current => ({count: current.count + 1}));
    // this.setState({count: this.state.count + 1});
    // -> 안좋은예 (current로 현재의 상태를 불러와서 사용하도록 하자.)
  };
  minus = () => {
    this.setState({
      count: this.state.count - 1
    });
  };
  
  render(){
    return (
      <div>
        <h1>The number is : {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

예전 state값으로 새로운 state를 만들때는 return해주는 함수를 사용하기
-> setState가 비동기이므로함수를 따로 뺐을때는 무조건 화살표 함수 쓰기! function을 사용하면 this가 달라져버림

life cycle

life cycle method : react가 component를 생성하고 없애는 방법
Mount : 어떤 component가 DOM에 처음 랜더링 될 때 (component가 태어나는 것)
Unmount : component가 제거될 때 (component가 죽는것)

componentDidMount

• component가 처음 생성됐을때 실행

  componentDidMount () {
    setTimeout(() => {
      this.setState({isLoading: false})
    }, 6000);
  }

• 컴포넌트가 DOM에 랜더링 된 후 6초 후 실행

componentDidUpdate

• component가 업데이트됐을때 실행

  componentDidUpdate () {
    console.log("updated!")
  }

• state 값이 변경(업데이트)될때마다 실행

componentWillUnmount

• component가 떠날때 호출

  componentWillUnmount () {
    console.log("unmount!")
  }

그 외 팁

• jsx = js + xml이기때문에 싱글태그는 꼭 뒤에 닫는 태그 쓰기
  ex) <input type="number"/>
• 함수를 따로 뺐을때는 무조건 Arrow Function사용하기! function을 사용하면 this가 가리키는 것이 달라지기 때문에.