16일차 / Class Component , lifecycle, Ref, useEffect

15일차 코드리뷰

댓글 수정 defaultValue를 어디서 주는가?
1. presenterItem에서 el을 props해서 넘겨준다.
★value와 defaultValue가 함께 있으면 value가 실행되고 defaultValue가 무시되므로 defaultValue만 사용해준다★

스프레드 연산자 리팩토링

 const [inputs, setInputs] = useState({
    writer: "",
    title: "",
    contents: "",
  });
  
   const result = await callApi({
      variables: {
        writer: inputs.writer,
        title: inputs.title,
        contents: inputs.contents,
      },
      
      => 스프레드 연산자 사용해서 짧게 줄일 수 있다.
      
    const result = await callApi({
      variables: { ...inputs },
    });

객체에서는 키값이 중복될 수 없다!

이렇게 되면 event.target.value가 값을 덮어쓰므로 상관없다.

id를 키로하면 오류가 나지만 대괄호에 넣으면 id 값을 먼저 적용시키기 때문에 오류가 나지 않는다.

event.target.id는 값이 들어있는 변수이기 때문에 키가 되기 어렵다.
그래서 그 해당 내용을 key로 하고 싶을 때는 대괄호를 쳐야함. 이 대괄호는 배열의 대괄호가 아닌 변수를 문자로 바꿔주는 대괄호다.

onChange~~ 3개를 onChagneInput 하나로 묶어주어 하나의 함수로 여러개에 적용이 가능하게 리팩토링.

클래스 컴포넌트

Class란?

물건을 만드는 설명서

객체, 다른 말로 인스턴스
설명서에 내용이 기록되어있어야 사용가능
함수인데 앞에 function이 붙어있지 않다?
다른말로 메소드라고 부른다.

vs 함수형 컴포넌트

일반적인 차이점

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

class는 컴포넌트의 역할 X
하지만 컴포넌트의 기능을 쓰고싶다면 extends로 확장으로 사용가능 (react에서 제공)

state는 Component에서 제공해주는 것이기 때문에 이름 변경 X

render : 화면을 그려줌

this

클래스 자체를 의미

this는 class 내 모든 것들에 접근하는데 이때, bind(this)를 통해 클래스 내부의 요소를 명시하지 않으면 최상단(window)을 this로 인식하게 된다.

매번 똑같지 않음
그때그때마다 누가 실행을 시켰느냐에 따라 다르다.

매번 달라지는 애들을 동적 스코프라고 한다.

화살표 함수를 사용하면 바뀌지 않는다.
이것을 언어적인 스코프, 렉시컬(lexical) 스코프라고 한다.

이 상황에서는 onClickCounter의 this와 render의 this는 다른 this라서 실행환경이 다르기 때문에 실행이 되지 않는다.
그렇기 때문에 화살표 함수를 사용해서 this를 동일하게 만들어준다.

화살표 함수를 사용하지 않고 사용하고 싶다면 bind를 사용한다.

컴포넌트 생명주기

Ref

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

대표적인 예로, input 태그를 선택하여 커서를 깜빡이도록 하고 싶다면 useRef를 사용하여 input 태그를 선택하고, focus() 기능을 활용하여 커서를 깜빡이도록 해야한다.

  aaa = createRef<HTMLInputElement>();
  
  
   <input type="text" ref={this.aaa} />

aaa에 태그를 담았다.

  componentDidMount() {
    console.log("마운트 됨!");
    this.aaa.current?.focus();
    // 포커스 깜빡깜빡
  }

포커스가 깜빡거린다!

함수형으로 바꿔보기

클래스에서 가능하다는 것은 함수형으로도 가능하다는 뜻이다.

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

interface IState {
  count: number;
}

export default function CounterPage() {
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>();

  const [count, setCount] = useState(99);


  const onClickCounter = () => {
    setCount((prev) => prev + 1);
  };

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

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

useEffect

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

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

의존성 배열을 생략하고 작성할 수도 있는데 그럴경우, 변경되는 모든 사항마다 실행하게 된다.

빈 괄호면 한번만 실행되고 끝난다.
괄호 안의 count가 있다면, count가 바뀔때마다 실행이 되는 것이다.

가급적이면 useEffect에서 setState의 사용을 권장하지 않는다.

useEffect는 컴포넌트가 그려진(=마운트된) 이후에 실행되는 함수인데, 컴포넌트가 마운트된 이후에 setState를 적용하게 되면,

1. state가 변경되고,
2. 변경된 state로 컴포넌트가 다시그려지게(=리렌더) 된다.

따라서, 컴포넌트가 그려지고난 후, 또다시 그려지는작업(=렌더링)이 1번 더 일어나게 됨.