코드캠프 4주 1일차

• Class-Component
• Architecture
• Apollo-Servre / Graphql
• Cloud-Storage
• Debouncing / Throttling

Class-Component

• class
• this
• component-Lifecycle

Class-Component

This

this 는 calss 자체를 의미하며 자체의 state를 의미하기도한다
react에서는 주로 Component기능 안에서 사용할 때 사용한다.

또한 this는 실행시킨 대상에 따라 값이 달라지며 동적 스코프 라고도 한다.

콘솔에서 작성한 this와 객체를 봐보자

this  //기본적으로 this가 가르키는것
Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}


const aaa ={
    age: 13,
    school: "다람쥐초등학교",
    qqq: function(){
        console.log(this)
    }
}

const bbb ={
    age: 13,
    school: "다람쥐초등학교",
    qqq: ()=>{
        console.log(this)
    }
}

bbb.qqq()
VM473:5 Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}


aaa.qqq()
VM299:5 {age: 13, school: '다람쥐초등학교', qqq: ƒ}

함수선언식 => 화살표 함수로 바꾸어 주기만 했는데 작동이 안되던 aaa의 this가 bbb에선 this로 작동이된다.

즉 this는 실행하는 요소/환경 에 따라 값이 변하며 이를 언어적으로 통합하기위해선 화살표함수를 사용하며

혹은 .bind(this)를 통해 서로 다른 실행요소/환경에서 실행되고 있는 this를 묶어주어 함수선언식으로 사용가능하다.

component-Lifecycle

component-Lifecycle은 크게 4가지 단계로 구분된다.

클래스형 컴포넌트에서 사용할 경우 4가지 함수를 사용하여 랜더~종료까지 표기하며
1.그리기 render
2.그리고 난 뒤 componentDidMount
3.그리고 난 뒤 변경됐을 때 componentDidUpdate
4.그리고 난 뒤 사라질 때 componentWillUnmount

함수형 컴포넌트에선 이것의 기능을 모두 통합한 useEffect를 사용하게 된다.

클래스형 컴포넌트 예시를 봐보자

ex)

import { Component, createRef } from "react";
import Router from "next/router";

interface IState {
  ischange: boolean;
  isWarning: string;
}
export default class CounterPage extends Component {
  inputRef = createRef<HTMLInputElement>();
  state = {
    isChange: false,
    isWarning: "",
  };

  componentDidMount() {
    alert("Rendered!!!");
    this.inputRef.current?.focus();
  }

  componentDidUpdate() {
    alert("Changed!!!");
  }

  componentWillUnmount() {
    alert("Bye!!");
  }

  onClickCounter = () => {
    console.log(this.state.isChange);
    if (this.state.isChange === false) {
      this.setState((prev: IState) => ({
        isChange: true,
        isWarning: "변경되었습니다.",
      }));
    } else if (this.state.isChange === true) {
      this.setState((prev: IState) => ({
        isChange: false,
        isWarning: "변경되었습니다!!!",
      }));
    }
  };

  onClickMove() {
    Router.push("/");
  }
	console.log("Hi")
  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.onClickCounter}>변경</button>
        <button onClick={this.onClickMove}>이동</button>
        <div>{this.state.isWarning}</div>
      </div>
    );
  }
}

클래스형 컴포넌트에선 기존의 const/let useState 등등 익숙했던 요소들이 많이 빠지게 된다.

state = {
    isChange: false,
    isWarning: "",
  };

부분이 우리가 아는useState가 될 것 이고
render() 위에있는 console.log("Hi")가 먼저 작동하고 이후
1.그리기 render
2.그리고 난 뒤 componentDidMount
3.그리고 난 뒤 변경됐을 때 componentDidUpdate
4.그리고 난 뒤 사라질 때 componentWillUnmount
순서에 맞춰서 차례대로 실행이 될 것이다.

JavaScript에선 위부터 아래로 순차적으로 실행이 되는게 원칙이지만
render()와 이후 함수들은 함수가 실행되기 위해 랜더링이 되야 하기 때문이다.

세부적으로 살펴보면
1. render() 가 return(~~~) 의 부분을 그려주면서 랜더링이 될 것 이고,

2.componentDidMount()이 랜더링이 완료된후 실행 될것이다.
위 함수의 경우엔 alert("Rendered!!!"); 알럿이 먼저 뜰것이고
this.inputRef.current?.focus(); 자동으로 inputRef를 통해 인풋박스에 포커스가 주어질것이다.

3.componentDidUpdate() 를 통해 변경이 일어나면alert("Changed!!!"); 알럿창이 나올것이고

4.마지막으로 componentWillUnmount()를 통해 마지막 함수가 실행되며 alert("Bye!!"); 알럿이 실행될것이다.

우리는 이 하나의 주기를 component-Lifecycle 이라고 한다.