#3. STATE

• state는 보통 동적 데이터(변하는 데이터, 존재하지 않는 데이터)를 이용해서 작업할 때 만들어진다. 이번 Chap에선 props가 아닌 state에 중점을 맞춰서 배울 것임.

1) Food 컴포넌트와 관련된 것들은 이젠 지워도 된다. 또한 App 컴포넌트 또한 이제는 function 컴포넌트가 아닌 class 컴포넌트 형태로 쓸 것이다.

 1. foodILike 삭제

 2. Food 컴포넌트 삭제 

 3. Food.propTypes 삭제

 4. function App을 삭제 후 다음과 같이 class App 작성

class App extends React.Component{
  render(){
    return <h1>Hi, it's a class Component!</h1>
  }
}

여기서 React.Component를 extend하는 이유는 React.Component가 갖고있는 많은 기능들 중 state기능을 사용하고자 함에 있다.

React 컴포넌트는 function 컴포넌트와 달리 class 컴포넌트이기 때문에 return하는 부분이 없다. 대신 render 함수를 갖고있다. 위와 같이 작성 후 실행을 하면 it's a class Component! 가 출력될 것이다.

 

그렇다면 왜 편한 function 컴포넌트를 두고 class 컴포넌트를 사용하는 것일까?

state라는 객체이자 데이터를 저장할 공간이 되는 기능을 사용하기 위함이다.

 

2) 이제 class App을 이용해서 무언가를 출력해보자. 아래와 같이 state 라는 데이터 공간에 count 변수를 작성하고, add, minus라는 함수 또한 작성해준다. 이후 render 함수에서 return 문에 아래와 같이 작성하면 클릭을 통해 add와 minus 함수가 실행될 것이다.

 

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

  add = () => {
    console.log("Add");
  };
  
  minus = () => {
    console.log("Minus");
  };



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

3) state를 변경할 때에는 setState를 사용해야만 React가 인지를 하고서 render 함수를 refresh하여 실행해준다.

즉, setState를 이용하지 않으면 새로 변경된 state값에 대해 render 함수가 호출을 할 수 없다.(Refresh가 안되었으므로)

다음 코드를 참고하도록 하자.

//이런 식으로 state값을 직접 변경하려고 하면 React가 변경사항에 대해 인지X.
minus = () => {
	this.state.count = -1;
}


//이렇게 setState를 활용하여 써주어야 React에서 새 state에 대해 render 함수를 호출함.
minus = () => {
	this.setState({ count: -1 });
}

4) 이번에는 add, minus 함수를 통해 state의 count 변수값을 변경해보자. 다음과 같이 2가지 방법이 있으나 state를 직접 사용하는 것보다는 2번째 방법처럼 현재의 count 값을 가져오는 current로 function 형태로 구현하는 것이 좋다.(state를 set할 때, React에서 외부의 상태에 의존하지 않는 가장 좋은 방법이다.)

//1번째 방법

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

//2번째 방법
 
  add = () => {
    this.setState(current => ({count: current.count + 1}));
  };
  
  minus = () => {
    this.setState(current => ({count: current.count - 1}));
  };

 

가장 중요한 것은...

매순간 setState를 호출할 때마다 React는 새로운 state와 함께 render 함수를 호출한다. 그러나, this.state.count 이런 식으로 setState를 써버리면 render 함수를 호출하지 않기 때문에 아무 변화가 없다.

 

5) React.Component에는 render 함수 외에도 component를 생성/제거하는 life cycle 함수들을 갖는다. 여러가지를 찾아보자.

 

1. mounting (컴포넌트가 mount될 때, 즉, screen에 표시될 때, constructor를 호출함.이후 render를 호출할 때 componentDidmount()를 호출함.)

• constructor()

-> javascript에서 class를 만들 때 호출되는 함수다.

• getDerivedStateFromProps()

-> 일단 공부 X

• render()

-> 여태껏 공부했던 render 함수

• componentDidMount()

-> render함수가 실행이 된 후 실행되는 함수

---

2. updating(setState를 호출하면 component를 호출하고 render를 호출한 다음 업데이트가 진행되고 componentUpdate가 실행된다.)

• getDerivedStateFromProps()

-> 일단 공부 X

• shouldComponentUpdate()

-> 일단 공부 X. 기본적으로 업데이트 할지 말지 여부를 결정하는 것과 관련된 함수임.

• render()
• getSnapshotBeforeUpdate()

-> 공부 X

• componentDidUpdate()

-> setState로 현재 컴포넌트에 변경사항이 생겼을 때 실행되는 함수임.

---

3. unmounting

 

• componentWillUnmount()

-> 다른 페이지로 이동하는 등 현재 컴포넌트를 종료할 때 실행되는 함수임.

 

---

컴포넌트의 Life Cycle을 요약하자면...

1. class를 1개 만들기에 constructor 함수를 실행한다.
2. render함수를 실행하여 현재 컴포넌트의 상태를 보여주고 componentDidMount 함수를 실행한다.
3. setState를 사용하는 함수를 사용하게 되면 다시 render를 해주고나서 componentUpdate함수를 실행한다.
4. 다른 페이지로 변경 시 componentWillUnmount 함수를 실행한다.

6) 이제 모든 내용들을 지우고 Loading창 구성을 위한 state element와 componentDidMount 함수를 만들어보자. 다음과 같이 하면 Loading 메시지를 띄우고 6초 후 We are Ready 라는 메시지를 띄워준다.

<App.js>

import React from 'react';

class App extends React.Component{

  state = {
    isLoading: true
  }

  componentDidMount(){
    setTimeout(() => {
      this.setState({ isLoading : false })
    }, 6000);
  }
  render(){
    const { isLoading } = this.state;
    return(
      <div>
        {isLoading? "Loading" : "We are Ready"}
      </div>
    )
  }

}

export default App;

<기습 질문>

Q. state에 없는 element를 중간에 만들어주어도 되나?

A. ㅇㅇ된다. 모든 element들을 state에 처음부터 모두 작성해줄 필요는 없다. 중간에 만들면 그 element가 state에 생성된다.