React 기초 - Class Component (feat. State)

Class Component

• 지금까지는 componet를 function으로 정의했지만, class를 활용해 정의할 수도 있다.

class App extends React.Component {
  render() {
    return (
        <h1>Hello</h1>
    );
  }
}

• React.Component를 상속받아 새로운 Componet를 정의한다.
• React.Component는 render() 메소드를 가지고 있기 때문에 이를 활용하여 function component와 유사하게 return할 수 있다.
• react는 모든 class component의 render() 메소드를 자동적으로 실행하여 function component와 동일하게 결과가 나오도록 처리한다.

---

State

• State는 class component에서 동적으로 변화하는 데이터를 넣을 수 있는 오브젝트이다.
• 우리가 function component가 아닌 class component를 사용하는 이유가 바로 이 state 때문이다.

class App extends React.Component {
  state = {
    count: 0
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
      </div>
    );
  }
}

• 위와 같이 작성하여 사용한다.
• 해당 state에 존재하는 데이터는 앞서 언급했듯 동적이다. 따라서 이를 동적으로 조작할 수 있다.

---

State 데이터 동적으로 조작하기

• 주로 state의 데이터를 조작할 수 있는 함수를 만들고, 이를 실행하는 버튼을 브라우저 상에 띄워 동적 조작이 가능하도록 한다.
• 하지만 state의 데이터를 단순히 조작한다면 render 메소드가 refresh되지 않기 때문에 해당 데이터의 동적 조작이 브라우저 상에 반영되지 않는다.
• 따라서 setState함수를 사용해야한다.

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

• setState는 새로 State object를 설정해준다.
• 따라서 current(현재값)을 받아 이를 1 늘려주어 해당 값을 기반으로 state를 설정하도록 한 것이다.

• 이렇게 하면 버튼을 누를 때마다 state의 count값이 커지고 작아지면서 그와 동시에 render 메소드가 refresh된다.
• react는 virtual DOM이라고 하는 가상의 데이터를 가지고 있기 때문에 페이지가 refresh되지 않고 자연스러운 처리가 가능하다.

---

Component Life Cycle

• Component는 일정한 Life Cycle로 메소드가 실행된다.
• 여러 메소드 중 중요한 것 몇가지만 살펴보자.
• mounting : Component 최초 생성시 처리되는 라이프사이클
• constructor -> (getDerivedStateFromProps) -> render -> componentDidMount
• constructor() : javascript에서 class를 생성할 때 최초로 실행되는 메소드
• render() : virtual DOM을 리턴하는 메소드
• componentDidMount() : component가 mount되었을 때 마지막으로 실행되는 메소드
• updating : State를 변경하는 등의 업데이트 작업시 처리되는 라이프사이클
• (getDerivedStateFromProps) -> (shouldCompnentUpdate) -> render -> (getSnapshotBeforeUpdate) -> componentDidUpdate
• componentDidUpdate() : component가 update되었을 때 마지막으로 실행되는 메소드
• unmounting : Component가 없어질 때 처리되는 라이프사이클