[TIL] 4주차 - 1. 컴포넌트 생명주기 (feat. Class Component)

Class

 

class componenet 어떤식으로 구성되어 있을까요?

컴포넌트 사이클에 대해 알아보겠습니다.

 

 

자바스크립트는 객체지향 언어 입니다.

점 .을 하면 그 객체가 가지고 있는 함수, 변수를 사용할 수 있습니다.

위 사진에서 date는 Date() 객체에 대한 주솟값을 받아 .점을 통해

해당 객체의 함수를 사용하고 있습니다.

 

컴포넌트 역시 클래스로 만들어줄 수 있습니다.

클래스형 컴포넌트는

use ~ 이름을 가진 hooks는 사용할 수 없고

html을 표현하기 위한 render()함수가 필요합니다.

 

class는 자바스크립트 ES6 에 나온 문법이고

이전에는 prototype 문법을 사용했습니다.

 

컴포넌트 선언 방식은 

함수형 컴포넌트 와 클래스형 컴포넌트 이렇게 두가지가 있습니다.

 

이 둘의 특징을 정리해보면 다음과 같습니다.

 

• 클래스형
  • Hook 없이 state, lifeCycle 구현 가능
  • 표현방법 명시적, 기능이 조금 더 많음
• 함수형
  • Hook을 이용한 state,lifeCycle 구현
  • 클래스형에 비해 간결한 표현

 

클래스형 컴포넌트의 경우

state, lifeCycle  기능, 메서드 정의 등을 할 수 있습니다.

 

함수형 컴포넌트는 state와 라이프사이클 API 사용이 불가능하다는 단점이 있으나

리액트에 Hooks라는 기능이 도입되면서 해결되었습니다.

 

 

---

 

클래스형 컴포넌트 역시 js와 html으로 나뉘며

각각 컨테이너와 프레젠터로 만들 수 있습니다.

 

---

 

 

🔨 클래스형과 함수형 둘다 알아야 할까요?

함수형으로 바뀌는 추세이지만 아직까지도

클래스형을 함수형으로 바꾸는 회사들이 있기 때문에

클래스를 알아야 함수형으로 옮길 수 있습니다.

 

 

 

 

---

 

 

동적 this

: 어디서 실행되느냐에 따라 실행 주체가 다름.

 

객체는 state(상태)를 나타내는 프로퍼티와 behavior(동작)을 나타내는 메서드로 표현 됩니다.

동작을 나타내는 메서드는 자신이 속한 객체의 상태인 프로퍼티를 참조하고 변경할 수 있습니다.

이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면

먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 합니다. 

 

이 때 사용할 수 있는 것이 this 입니다. this는 자기자신을 나타내는데요.

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.

this를 통해 자신이 속한 객체 또는

자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다.

 

this는 어디서 실행하느냐에 따라 다릅니다.

this는 class 내 모든 것들에 접근합니다.

this의 가장 기본은 최상단(window)이며

this를 처음 실행하면 window 객체를 사용하게 됩니다.

• this.onClickCounter.bind(this) ← 이렇게 해주면 this 주체 고정됨! 이렇게 안해주면 최상단(window)로 인식된다.
• 렉시컬 this : 또는 화살표 함수로 해주면 bind()가 필요하지 않다.

 

 

클래스형 컴포넌트에서는 선언한 메서드를

참조하기 위해 this를 사용하고 있습니다.

this를 사용하여 참조할 수 있는 property는 아래와 같습니다.

 

• state
• props
• refs
• 컴포넌트 메서드
• 생명주기 메서드

 

 

위의 코드를 확인해보면 클래스 컴포넌트에서는 state를

하나의 state에 전부 집어 넣어주고 있습니다.

setState를 따로 작성하지 않고 Component 내에서 바로 사용 할 수 있습니다.

---

 

 

컴포넌트의 생명주기(Life Cycle)

 

컴포넌트의 Life Cycle은

컴포넌트가 브라우저에 나타나고

업데이트 되고 사라질 때 호출되는 메서드 입니다.

 

Life Cycle을 통해

특정 시점에 코드가 실행되도록

설정할 수 있습니다.

 

1. 그리기 → render
2. 그리고 난 뒤 → componentDidMount
3. 그리고 난 뒤 변경 → componentDidUpdate
4. 그리고 난 뒤 사라짐 → componentWillUnmount

 

 

아래 코드에서 count 버튼을 만들고

LifeCycle흐름을 보도록 하겠습니다.

import { Component, createRef } from "react";
import Router from "next/router";
interface IState {
  count: number;
}
export default class ClassCounterPage extends Component {
  // 이 변수는 태그와 연결시킬 수 있다.
  inputRef = createRef<HTMLInputElement>();
  state = {
    count: 0,
  };

  componentDidMount() {
    console.log("마운트됨");
    // input 태그 선택해서 포커스 깜빡
    this.inputRef.current?.focus();
  }

  componentDidUpdate() {
    console.log("수정되고 다시그려짐");
  }

  componentWillUnmount() {
    console.log("여기서 나갈래요");
    // 나가기전에 마지막으로 할것들
  }

  onClickCounter = () => {
    console.log(this.state.count);
    this.setState((prev: IState) => ({
      count: prev.count + 1,
    }));
  };

  onClickMove = () => {
    Router.push("/");
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <div>현재카운트: {this.state.count}</div>
        <button
          onClick={
            this.onClickCounter // .bind(this)//
          }
        >
          카운트 올리기!!!!!!!!!!!
        </button>
        <button onClick={this.onClickMove}>나가기</button>
      </div>
    );
  }
}

 

 

페이지가 그려진 후 componentDidMount 를 통해 console.log를 확인할 수 있습니다.

 

 

카운트를 올려준 후, componentDidUpdate를 통해 수정된 사실을 알 수 있습니다.

 

 

페이지 이동하기를 통해 componentDidUnmount가 실행되는 것을 확인 할 수 있습니다.

 

 

 

---

useRef

특정 태그를 조작하기 위해 선택할 때 사용하는 도구입니다.

 

 

 

input 태그를 선택하여 커서를 깜빡이도록 하고 싶다면 useRef를 사용하여 input 태그를 선택하고, focus() 기능을 활용하여 커서를 깜빡이도록 해야합니다.

 

(이때 useEffect는 컴포넌트가 그려진 이후 실행되는 함수 이므로

인풋창이 먼저 그려지고 그 다음 포커스를 주는 흐름으로 가야 합니다.)

---

useEffect

 

useEffect는 컴포넌트가 그려진 이후에 실행되는 함수입니다.

따라서 클래스형 컴포넌트에서는

componentDidMount를 통해 작동 시킵니다.

 

만약 input 태그의 커서를 깜빡이도록 하고 싶다면

컴포넌트가 다 그려진 이후, 즉 input 태그가

화면에 그려진 이후에 명령을 실행해야 합니다.

 

즉, useEffect에서 명령을 실행해야 합니다.

위 형식에서 [] 부분을 의존성 배열이라 칭합니다.

이 의존성 배열[] 안의 내용에 들어있는 요소가 변경될 때, 실행 되며,

의존성 배열을 생략하고 작성할 수도 있는데

그럴경우, 변경되는 모든 사항마다 실행하게 됩니다.

 

---

 

useEffect와 useRef (자동포커스, 스크롤바 컨트롤 등)

 

useEffect와 useRef를 함께 사용하는 예제는 아래와 같습니다.

 

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();
}, []);

return <input type="password" ref={inputRef} />;

 

useEffect와 open-api

오픈 API란 누구든지 사용할 수 있도록 공개된 API를 말합니다.

동물 이미지, 날씨 정보, 바이러스 정보, 금융 정보 등

여러 정보들을 API를 통해 무료로 데이터를 사용할 수 있습니다.

프론트엔드 개발자라면, 백엔드 개발자 없이

오픈API를 통해서 서비스를 만드는 것이 가능합니다.

 

 

---

 

-  Component-Lifecycle

1. 그리기 ⇒ render
2. 그리고 난 뒤 ⇒ componentDidMount
3. 그리고 난 뒤 변경됐을 때 ⇒ componentDidUpdate
4. 그리고 난 뒤 사라질 때 ⇒ componentWillUnmount
   채팅페이지에서 채팅방 나갈 때 백엔드에 알림(채팅창 사라질 때)

 - useEffect는 나중에 실행되는 것. 

 

---

 

다양한 오픈API 사이트 모음

 

https://github.com/public-apis/public-apis