📒 오늘 공부한 내용

🔍수업목차

[16-1] Class란?
[16-2] class 컴포넌트의 생명주기(Life Cycle)
[16-3] 함수형 컴포넌트의 생명주기 훅 useEffect
[16-4] open-api

✅ Class란?

---

• class는 객체이자 물건을 만드는 설명서

📂 클래스에서의 함수와 변수 사용법

• 클래스에서 함수와 변수를 사용할때는 function,let,const를 붙이지 않는다.

class Monster {
  // class의 변수 작성
  power = 50;

  // class의 함수(메소드) 작성
  attack(): void {
    console.log("공격합니다!!");
  }
}

• 클래스에서 만들어진 함수를 메소드 라고 부른다.

📂 클래스에서의 상속

• 클래스에서는 공통 기능을 extends를 통해 상속 해줄 수 있다.

class Monster {
  power = 50;
  attack(): void {
    console.log("공격합니다!!");
  }
}

// 클래스 상속 : 기존 클래스에 기능을 추가해서 만든 클래스
class SuperMonster extends Monster {
  run(): void {
    console.log("도망가자!!");
  }

  // 오버라이딩: Monster의 메소드를 다시 정의해서 덮어씌운다.
  attack(): void {
    console.log("슈퍼 몬스터 필살기!!");
  }
}

const monster = new Monster();
console.log(monster.power); // 50
monster.attack(); // 공격합니다!!

const supermonster = new SuperMonster();
console.log(supermonster.power); // 50
supermonster.attack(); // 슈퍼 몬스터 필살기!!

📂 class component 만들어보기

//count 컴포넌트를 만들어보겠습니다.
import {component} from 'react'

export default class ClassCounterPage extends Component {
	// class 변수의 선언 방식
	state = {
				count : 0,
			}

	// class에서의 함수 사용방식 
		onClickCounter = () =>{
				console.log(this.state.conut)
				this.setState(((prev))=>({
						count : this.state.count(=prev.count) +1
			}))
		}

	// 화면 그리는 부분
	render(){
		return(
			<div> 
				{/* this는 class 자기자신을 뜻합니다. */}
					<div>현재 카운트 : {this.state.count}</div>
				{/* 직접 바인딩할 때는 onClick={this.onClickCouter.bind(this)} 라고 적어주셔야 합니다. */}
					<button onClick={this.onClickCouter}>카운트 올리기</button>
			</div>
			)
		}
	}

💡 this 바인딩

this는 어디서 실행하냐에 따라서 변화하는 이슈가 있다.
실행하는 주체에 따라서 this가 다르게 나온다.
onClickCounter 를 클릭시에 this가 onClickCounter로 바뀌게 된다.
변화하는 this를 class로 고정하기 위해서는 this를 바인딩해주시거나 화살표 함수를 써주셔야한다.

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

---

• 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드

1. 그리기 : render 인풋창 그리기
2. 그리고 난 뒤 : componentDidMount
3. 그리고 난 뒤 변경됐을 때 : componentDidUpdate
4. 그리고 난 뒤 사라질 때 : componentWillUnmount

// class 컴포넌트의 생명주기
import {Component} from 'react'
import Router from 'react'


export default class ClassCounterPage  extends Component{
		state = {
					count : 0,
				}


//라이프사이클 메서드
componentDidMout(){
		console.log("마운트 됨")
		//input태그 선택해서 포커스 깜빡거리게 하기
	}
componentDidUpdate(){
		console.log("수정하고 다시 그림!!")
	}
componentWillUnmount(){
		console.log("여기서 나갈래요")
		//나가기 전에 마지막으로 할 것들
	}


// 카운트 올리기 함수
onClickCouter = ()=>{
		console.log(this.state.conut)
		this.setState(((prev))=>({
		count : this.state.count(=prev.count) +1
			}))
	}

// 현재 페이지 나가기 함수 _ componentWillUnmount를 보기위한
onClickMove = () => {
		router.push('/')
	}
// 화면 그리는 부분
render(){
	return(
		<div> 
			// this는 class 자기자신을 뜻합니다.
				<div>현재 카운트 : {this.state.count}</div>
	
			// 직접 바인딩 하실때는 onClick={this.onClickCouter.bind(this)} 라고 적어주셔야 합니다.
				<button onClick={this.onClickCouter}>카운트 올리기</button>
				<button onClick={this.onClickMove}>나가기</button>
		</div>
		)
	}
}

✅ 함수형 컴포넌트의 생명주기 훅 useEffect

---

• componentDidMount와 비슷

  // 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됩니다.(1번만 실행)
  
  useEffect(()=>{
  		console.log("마운트 됨!!")
  	},[])

• componentDidUpdate와 비슷

  // 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행됩니다.
  useEffect(()=>{
  		console.log("수정하고 다시 그려짐!!")
  	})
  
  
  // someState가 수정될때만 리렌더 해주기
  useEffect(()=>{
  		console.log("수정하고 다시 그려짐!!")
  	},[someState])

• componentWillUnmount와 비슷

  useEffect(()=>{
  		console.log("수정하고 다시 그려짐!!")
  
  		//이부분이 끝나고 진행할 것들
  		return(()=>{
  			console.log("여기서 나갈래요!!")
  		})
  
  	})

💡 의존성 배열[ ]

useEffect에 의존성 배열을 적어주지 않고 return 또한 해주지 않으셨다면, 무한렌더 지옥에 빠지게 된다.
의존성 배열이 함수형 컴포넌트의 생명주기를 결정하는 포인트라고 봐도 무방하다.

💡 useEffect 사용시 주의 사항

useEffecrt 내에서 setState를 사용할때는 정말 필요한 경우가 아니라면 지양하시는게 가장 좋다.
useEffecrt 내에서 setState를 사용하게 되면 불필요한 리렌더나 무한루프를 일으키게 되고 성능면에서 비효율적이게 된다.

✅ open-api

---

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

• 다양한 오픈API 사이트 모음

📂 useEffect와 open-api

• axios를 사용하기위해 axios를 설치하고 import 해와야 한다.

import { useEffect, useState } from "react";
import axios from "axios";

export default function RestGetPage(): JSX.Element {
  const [img, setImg] = useState("");

  useEffect(() => {
    // async를 붙이기 위해 함수를 선언하고, 만든 함수를 실행시켜야 합니다.
    const getImg = async (): Promise<void> => {
      const result = await axios.get("https://dog.ceo/api/breeds/image/random");
      setImg(result.data.message);
    };
    void getImg();
  }, []);

  return <img src={img} />;
}