🤓 What I Learned Today

스택오버플로우를 찾아보다가 function component보
다 class component 로 씌여진 코드들이 꽤 많다고 생각되어 많이 쓰지는 않지만 class 컴포넌트도 공부!

근데 왜 아직도 class 컴포넌트를 사용하는 이유는 뭘까?

그 이유는 많은 개발 문서들이 class 컴포턴트로 작성이 되었고 리액트에서 제공하는 유용한 기능 중 하나인 life cycle function 이 class 컴포넌트에서만 동작이 됐었다.(하지만 현재는 function 컴포넌트에서도 lifecycle 함수가 제공된다.현재는 공식문서에서도 function 컴포넌트를 사용할 것이 추천이 된다고 한다.

🤔 Code Snippets

예시로 클래스 컴포넌트와 함수 컴포넌트가 뭐가 다른 지 알아보았다..

import React, { Component } from "react";

export default class AppClass extends Component {
  //constructor 생성자:컴포넌트가 실행되자 마자 호출이 되는 함수로 클래스의 기본함수이다.
  constructor(props) {
    super(props);
    //state 라는 object를 만들고 그 안에 내가 원하는 state를 다 넣으면 된다.
    this.state = {
      counter: 0,
      num: 1,
      value: 0,
    };
  }
  increase = () => {
    this.setState({
      counter: this.state.counter + 1,
      value: this.state.value + 1,
    });
  };
  render() {
    return (
      <>
        <div>
          {/* this.state를 매번 써야하는 불편함이 있다. */}
          <div>state{this.state.counter}</div>
          <button onClick={this.increase}>클릭</button>
        </div>
      </>
    );
  }
}

클릭버튼을 누를때마다 하나씩 증가한다!

🚀 Challenges Experienced

아직도 함수 컴포넌트가 익숙하지 않은데 클래스 컴포넌트까지 공부하려니 혼란하지만 클래스 컴포넌트에서 this.state 가 중요하다는 것을 알았다!

이전에 쓴 코드들도 한번 클래스 컴포넌트로 바꾸는 연습을 해봐야겠다.

(수정)
클래스 라이프사이클 정리