State

노마드 코더 강의를 통해 배운걸 정리한다.
ReactJS로 영화 웹 서비스 만들기

3.0 Class Components and State

state 는 보통 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 존재하지 않는 데이터.

class App extendㄴ React.Component{
}

extend React.Component 는 필수 단계이다.
extends 를 통해 React.Component 를 상속 받는 것인데, React.Component 는 많은 것을 가지고 있고 그 중 하나가 state 이다.

import React from "react"

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>
    );
  }
}

export default App;

javascript 에서는 button 에 다른 onClick 이나 eventListener 를 등록해야 하는데 react 에서는 자동으로 주어진 onClick 을 가지고 있다.

#3.1 All you need to know about State

매 순간 setState 를 호출할 때 마다 react 는 새로운 state 와 함께 render function 을 호출한다.

import React from "react"

class App extends React.Component{
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({count: current.count + 1}));
  };
  minus = () => {
    this.setState(current => ({count: current.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>
    );
  }
}

export default App;

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

state 를 set 할 때, react 에서 외부의 상태에 의존하지 않는 가장 좋은 방법이다.

this.state.count = 1;

this.setState({ count: this.state.count + 1});

위와 같은 식으로

• state 를 직접 변경하면 안된다.
• setState 를 사용해도 state 에 의존하면 성능에 문제가 생긴다.

#3.2 Component Life Cycle

React.Component 는 lisfe cycle method 를 가지고 있다.
life cycle method 는 기본적으로 react 가 component 를 생성하거나 없애는 방법이다.

• 참고
  • https://ko.reactjs.org/docs/react-component.html/
  • https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mounting

아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다.

• constructor()
  • class 가 생성 될 때 호출
  • coponent가 mount될 때 호출
• static getDerivedStateFromProps()
• render()
  • class 가 생성 될 때 or 업데이트 될 때 호출
• componentDidMount()
  • component가 처음 render될 때 호출됨

Updating

props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다.

• static getDerivedStateFromProps()
• shouldComponentUpdate()
  • 업데이트를 할지말지 결정하는 것에 대한 것이다.
• render()
• getSnapshotBeforeUpdate()
  • update 가 되고 render 를 호출해 update 가 완료되었다면 호출된다.
• componentDidUpdate()

Unmounting

아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출된다.

• componentWillUnmount()
  • component 가 떠날 때 호출

import React from "react"

class App extends React.Component{
  constructor(props){
    super(props)
    console.log("hello");
  }
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({count: current.count + 1}));
  };
  minus = () => {
    this.setState(current => ({count: current.count - 1}));
  };
  componentDidMount() {
    console.log("component rendered");
  }
  componentDidUpdate() {
    console.log("I just updated");
  }
  componentWillUnmount() {
    console.log("Goodbye, cruel world");
  }
  render(){
    console.log("I'm render");
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

#3.3 Planning the Movie Component

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;

div 안에 삼항 연산자를 사용해서 true 일때 "Loading", false 일때 "We are ready" 를 보여주게 한다.
처음에 state 에 isLoading 은 true 로 선언 되어있기에 Loading이 호출된다.
그리고 componentDidMount() 를 사용하는데, 이건 render 가 호출된 후에 완료되면 호출된다.
componentDidMount() 안에서는 setTimeout 을 사용해 타이머 기능을 쓰는데 6 초 뒤에 isLoading 이 false 로 바뀌게 된다.