TIL

⭐Class형 함수
⭐Component의 생명주기
⭐useRef는 무엇일까?
⭐useEffect는 무엇일까?

Class

객체를 생성하기 위한 템플릿이다. 쉽게 말하면 물건을 만드는 설명서로 이해하면 되겠다.

• 클래스형 컴포넌트는 다양한 객체를 만들 수 있는 틀이다.

• class date를 예를 들면 new Date의 기능들을 지정해서 사용할 수 있다.
• new Date()는 내장객체로 불리우며 내장객체 안에 객체라는 함수를 만들어내고 내장객체로 객체의 함수를 하나로 사용할 수 있다.
• 이를 객체지향프로그래밍(oop: objected oriented program)이라 부른다.

객체지향프로그래밍 장-단점

장점

• 코드 재사용이 용이하다.
  -협업하는 과정중에 협업자의 클래스를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용이 가능하다
• 유지보수가 간단하다.
  -수정해야 할 부분이 클래스 내부에 멤버 변수 또는 메서드로 존재하기 때문에 해당 부분만 수정해주면 된다.
• 대형프로젝트에 적합
  -클래스 단위로 모듈화 시켜서 개발할 수 있어서 대형 프로젝트에서의 업무 분담이 비교적 쉽다.

단점

• 처리 속도가 느리다.
• 객체가 많으면 용량이 커질 수 있다.
• 설계시 코딩 난이도가 대폭 상승 할 수 있다.

Class 사용

this 사용하기✨

• class 함수에서 component를 import 해오면 component 안에 setState 기능이 포함되어 있어서 따로 const 지정을 안해줘도 사용이 가능하다.
• Router도 마찬가지로 const 지정을 안해줘도 사용이 가능하다. 다만 import Router from 'next/router'를 해줄 것❗

💥주의할 점

• 클래스에서는 각 객체를 불러올 때 this.를 붙여줘야 한다.
• 동적 this: this 요녀석은 어디서 실행하느냐에 따라서 바뀌게 된다.
• this를 고정시키기 위해서는 실행하려는 함수 뒤에 .bind(this)를 입력해준다.
• 실행하려는 함수를 화살표 함수로 바꿔줄 경우 .bind(this)없이도 기존의 this 주체가 가장 큰 class가 된다.
• 이를 언어적인 this 또는 렉시컬 this라 부른다.

Component lifecycle

component lifecycle이란?

• component가 web browser상에 나타나고 업데이트 되고, 사라지게 될 때 호술 되는 method이다.
• 특정 시점에 코드가 실행 되도록 설정을 해줄 수 있다.

• 위의 코드를 콘솔로 찍어보면 아래 사진처럼 찍힌다.

• componentWillUnmount 함수기능인 나가기 버튼을 클릭하게 되면 기본 페이지인 화면으로 이동이 된다.(🔻)

useRef & useEffect

useRef란?

• 특정 태그를 조작하기 위해 선택할 때 사용하는 도구이다.
• input 태그안의 커서를 깜빡일 때 사용한다.
  

• useRef를 사용해서 input태그를 선택하고 focus()기능을 사용해주면 끝! 단, 태그랑 연결 시킬 수 있는 변수를 지정해줘야 한다(🔻)
  

useEffect란?

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

• input태그가 화면에 rendering(다 그려진 이후)이 된 이후에 명령을 실행 하면 커서가 깜빡이게 된다.
• [] : 의존성 배열 (안의 내용에 들어있는 요소가 변경될 때 실행되며, 의존성 배열없이 작성하게 되면 변경되는 모든 사항마다 실행이 된다❗

💥주의할 점

• useEffect에서 setState를 할 수 있다?
• useEffect안에서 state를 받기전에 render(화면에 그려짐)가 한번 실행 되고
• 그 후에 바뀐 state가 rerender(다시 그려짐)가 된다! => 별로 좋지 못한 방법이다.
• 데이터를 받아온 다음에 state를 써야할 경우엔 어쩔수 없이 쓰도록 하자❗