[React] 클래스형 컴포넌트

1. 클래스형 컴포넌트

export default class BlockClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
      name: "하이",
    };
    console.log("constructor");
  }
  componentDidMount() {
    console.log("componentDidMount");
  }
  componentDidUpdate() {
    console.log(this.state);
    console.log("componentDidUpdate");
  }
  add = () => {
    this.setState({ num: this.state.num + 1 });
    console.log(this.state);
  };
  render() {
    console.log("render");
    return (
      <div>
        <button onClick={this.add}></button>
        <div>{this.props.test}</div>
      </div>
    );
  }
}

2. 생명주기

생명주기란 작업을 하면서 원하는 분기가 필요하다. 그 분기에 맞게 작업을 컨트롤 할수 있도록 해주는것이다.

만약 화면을 그려주는 시기와 state값이 변했을때와 같은 부분을 컨트롤 할수 있게  리액트에서 지원해주는

함수들이 생명주기(lifecycle)이다.

 

생긴건 함수형과 많이 다르지 않다.

클래스로 선언되었고 리액트에서 제공하는 Component라는 클래스를 상속받아 온다.

 

1. mounting : 그려주고 컴포넌트가 시작될때 처음 한번 실행

2. updating : state가 업데이트 되고 UI가 그려질때

3. unmounting : 컴포넌트가 화면에서 사라질때

 

3. UI 세팅 과정

constructure -> render -> dom이 업데이트 되고 -> componentDidMount

이후 값이 변하면 componentDidUpdate (state가 변하면 업데이트 해주는 함수)

 

4. constructor

constructor lifecycle 함수중 하나로 생성자 이다.

컴포넌트가 생성되면 제일 처음으로 실행되는 함수

 

super() : 자식 클래스가 생성될때 부모 클래스의 생성자를 참조하는 방법

react 클래스 컴포넌트의 부모 클래스는 react.Component가 된다.

super를 쓰는 이유는 super를 사용하기 전에는 consturctor 안에서 this를 쓸수가 없다.

결국 consturctor 생성자 내부에서 this.props를 쓰려고 쓰는것이다.

 

함수형에서 useState함수를 썼지만 클래스 컴포넌트에서는 state값을 객체로 사용한다.

이 state값이 변경되면 다시 리렌더링 된다.

 

5. componentDidMount

작업을 하면 여기서 주로 데이터베이스 값을 가져온다.

componentDidMount 이게 UI를 그려준 다음에 실행되는 함수이기 때문에

UI를 그리기 전에 데이터를 가져와봤자 넣어줄수가 없기 때문에 UI를 그려주고 데이터를

가져와서 동작 시켜주기 위해서 componentDidMount lifecycle함수를 이용한다.

 

6. componentDidUpdate

함수형에서는 useState() , class 컴포넌트에서는 setState()

state값이 변하는 것은 비동기라고 했는데 그 값이 변한뒤에 값을 update해서 확인할수 있다.

이 말은 state값이 변하고 실행되는 함수라는 말이다.

state값이 변하고 처리해야하는 작업은 전부 이곳에서 해주면 된다.

 

7. add 함수

class 컴포넌트에서 state값을 변하게 하고 싶으면 setState() 함수를 이용해서 값을 수정한다.

setState 함수의 매개변수 안에 바꾸고 싶은 객체에서 바꾸고 싶은 키와 값을 넣어준다.

객체의 값을 추가해주면 여러 state 값을 수정할 수 있다.

 

8. 기타

class 컴포넌트에서는 this가 계속 붙는다. 이런 이유도 사람들이 함수형 컴포넌트를 선호하는 이유이다.

함수를 전달할때에도 하나의 클래스 안에 있기 때문에 this.add로 함수를 넣어줘야 한다.