붕어빵이라는 이름을 class에 주고 안에 만드는 방법을 넣는다.
new 붕어빵() 하면 붕어빵을 만들수 있다.
붕어빵 설명서는 하나지만 여러개의 붕어빵을 만들 수 있다.
몬스터 클래스를 만들고 기능,변수 등을 적용하는게 가능하다.
이는 설명서이다. 체력=100, attack(){} 등의 기능이 들어간
그럼 new 몬스터() 로 몬스터를 대량으로 만들 수 있다.
개발자의 입장에서는 컴포넌트를 만들 수 있는 설계도, 설명서라고 보면 된다.
class 컴포넌트 {
// 만드는 방법
title = ""
onCahangeTitle(){
dafd
}
onClickSubmit(){}
}
new 컴포넌트()
사용해 본 클래스 컴포넌트
class Date{
getFullYear(){
}
getMonth(){}
getDate(){}
등등
}
const myDate = new Date()
myDate.getFullYear()
myDate.getMonth()
myDate.getDate()
이렇게 사용했었다.
이런 기능을 역추적해서 클래스 컴포넌트 안에 이런 기능이 어떻게 만들어지는지 알 수 있다.
이런 기능을 함수라고도 하지만 .이 달려있기 때문에 메소드라고도 부른다.
함수는 function을 붙이지만 메소드는 function, const, let 이런 단어를 단어를 붙이지 않는다.
'.' 을 object에서 많이 볼 수 있었다.
그래서 이런것들을 내장객체라고 한다.
이런 변수를 인스턴스라고 한다.
이런 기능을 묶어 놓는 이유는 함수를 data라는 곳으로 그룹화 하려고,
결국 유지보수를 쉽게 하기 위함이다.
예를 들어 로그인 기능이 있다라고 하면 기능을 묶어놓은 그룹이 로그인 서비스라고 하면
loginService.login()
loginService.logout()
loginService.CheckLogin()
등으로 기능들을 그룹핑해놨다.
객체(객체지향프로그래밍-OOP)-object oriented programming
-실습-
class Monster {
power = 50;
// 앞에 const, let 안붙임
attack() {
console.log("공격합니다.");
}
}
const myMonster = new Monster()
myMonster.attack()
myMonster.power
몬스터라는 class를 만들어보았다.
class 슈퍼몬스터 extends Monster{
run(){
console.log("도망가자!")
}
}
const 나의슈퍼몬스터 = new 슈퍼몬스터()
나의슈퍼몬스터.attack();
나의슈퍼몬스터.run();이렇게 슈퍼몬스터를 추가하게 되면 Monster의 속성을 다 가지면서 새로운 기능을 추가할 수 있다.
이를 상속이라고 한다.
render말고는 내가 만들어 사용할 수 있음
class에서 자신을 가리키는 말을 this라고 함
컴퍼넌트 라이프 사이클 => 생명주기리고 부른다
어떤 시점에 특정 기능이 실행되야할때
=============
class컴포넌트를 function컴포넌트로 바꾸기
useEffect(() => {
console.log("그려지고 나서 실행!!")
}, [])뒤에 대괄호는 의존성 배열(dependency array)이라 한다.
그려지고나서 실행되는 useEffect
js는 순서대로 로딩하지만 useEffect는 나중에 로딩된다.
이게 무슨 말일까.. .ㅠ
이것때문에 속도가 좀 늦는다고 했다.
그래서 rest API를 useQuery 로 사용하고 싶을때 쓰는 라이브러리가 있는데 react query이다.
react query
rest API를 useQuery 로 사용하고 싶을때 쓰는 라이브러리
openAPI를 모아놓은 public-api 깃헙에 가면 모아져있다.
이 중 하나를 포폴에 추가
나만의 오픈 API라는 목록을 하나 만들어서 openAPI 이용한 기능
Auth부분이 No인 애들 위주로.
CORC가 yes인 애들
함수형 컴포넌트 리액트 독스
https://beta.reactjs.org/learn
