💡 Class란?
: class는 객체이자 물건을 만드는 설명서
대표적 클래스 사용예제)
const data = new Date() date.getFullYear() data.getMonth()// class Date { // getFullYear() {} // getMonth() {} // } // const date = new Date(); // console.log(date.getFullYear()); // console.log(date.getMonth() + 1); class Tori { age = 2; attack() { console.log("attack!!!!!"); } } //상속 class SuperTori extends Monster { age = 2; //오버라이딩 attack() { console.log("attackagain!!!!!"); } run() { console.log("run!!!!!"); } } const tori = new Tori(); tori.age; //2 tori.attack(); const myTori = new SuperTori(); myTori.age; //2 myTori.attack; // attackagain!!!!! myTori.run(); //run
- 여기서 데이트를 객체 또는 인스턴스라고 부른다.
- . 을 붙여서 함수나 변수를 넣을 수 있다.
- .을 붙여 사용해야 하는 함수들을 메소드라고 한다.
- 함수와 변수 사용 시 클래스 안에서는 const 나 funtion, let을 붙이지 않는다!
❗️객체지향프로그래밍-Object Oriented Programming
객체형태로 그룹핑해서 쓰자는 뜻!
[실습 section17-01]
- class counter만들기
import { Component } from "react"; // extends Component - 컴포넌트 기능을 가진 class export default class ClassCounterPage extends Component { //리액트에서 제공해주는 Componenet에 내장된 기능(이름변경불가, Component로 확장해야 사용가능) //class 변수의 선언방식 state = { count: 0, }; //화살표 함수로 변경해야 언어적인 this(class)로 인식! onClickCountUp = (): void => { console.log(this.state.count); //class가 객체이기 때문에 this.setState로 작성해야함. this.setState({ count: 1, }); }; //그림 그리기 - component 내장기능 render(): JSX.Element { return ( <> <div>{this.state.count}</div> {/* this를 onClickCountUp함수에 바인딩 해주기 */} <button onClick={this.onClickCountUp.bind(this)}>UP!</button> </> ); } }
- this개념 알고가기
this는 움직이는 애! 고정되있지 않음(동적스코프)
누가 실행 시켰느냐에 따라서 값이 매번 달라짐.
변화하는 this를 class로 고정하기 위해서는 this를 바인딩하거나
화살표 함수를 써야 한다.
바인딩을 거쳐 고정된 this를 lexical this라고 한다.<!DOCTYPE html> <html lang="ko"> <head> <title>This</title> <script> class ClassCounterPage { count = 10; // onClickCountUp() { onClickCountUp = () => { //방법1) 화살표 함수로 변경 - > count 10 가져올 수 있음. console.log("count : ", this.count); }; render() { const button = document.createElement("button"); button.count = 100; //class가 아닌 버튼에 달려있는 count가 실행됨 button.innerText = "UP!"; // button.addEventListener("click", this.onClickCountUp); button.addEventListener("click", this.onClickCountUp.this); //방법2) .bind(this)로 숨겨져있는 this도 같이 연결시켜주기 // <button onClick={this.onClickCountUp}> document.body.appendChild(button); } } window.onload = () => { const counter = new ClassCounterPage(); counter.render(); }; </script> </head> <body></body> </html>방법1) 화살표 함수로 변경해 에러를 줄일 수 있다.
방법2) .bind(this) 연결하기
-> this가 생략되어 있음.
-> 컴포넌트 상속을 통해 this로 컴포넌트 안의 기능들을 가지고 올 수 있음.
💡 Class 컴포넌트의 생명주기(Life Cycle)
컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드
(죽었다 살아남)
쉽게 말해, 특정 시점에 코드가 실행되도록 설정할 수 있다는 것
- 라이프사이클 메서드
import { Component } from "react"; import Router from "next/router"; export default class ClassCounterPage extends Component { state = { count: 0, }; //<라이프사이클 메서드> //리렌더와 상관없어짐! 특정페이지 요청방식 componentDIdMount(): void { console.log("그려지고 나서 실행"); } componentDIdUpdate(): void { console.log("변경되고 나서 실행"); } //예)채팅방 나가기 API componentWillUnmount(): void { console.log("사라지기 전에 실행"); } onClickCountUp = (): void => { console.log(this.state.count); this.setState({ count: 1, }); }; onClickMoveOut = (): void => { //그냥 라우터 통채로 가져오기 Router.push("/"); //기다릴거면 await/async }; render(): JSX.Element { return ( <> <div>{this.state.count}</div> {/* count가 100에서 1로 바뀜 */} <button onClick={this.onClickCountUp}>UP!</button> <button onClick={this.onClickMoveOut}>OUT!</button> </> ); } }
- 그리기 →
render인풋창 그리기- 그리고 난 뒤 →
componentDidMount(포커스 깜빡 깜빡 처리는 여기서!)
- 그리고 난 뒤 변경됐을 때 →
componentDidUpdate
- 그리고 난 뒤 사라질 때 →
componentWillUnmount
해당컴포넌트 안보이게 하기 위해 이동시켜줘야함!
router이용!
->페이지 이동되면서 실행!
JUST DO WHATEVER