리액트에서는 컴포넌트 선언하는 두가지 방식이 있는데 [클래스형 컴포넌트 & 함수 컴포넌트] 이다.
현재 자주 사용하지 않는 클래스형 컴포넌트 이지만 사용하고 있는 기업들이 아직 남아 있다고 한다. 기존에 있었던 서비스를 유지보수 할려면 클래스형 개념도 알고 있어야하는 이유이다.
class란?
객체이자 물건 만드는 설명서이다.
class 안에는 함수와 변수를 넣을 수 있다, 이 변수와 함수를 조합해 컴포넌트를 만들 수 있다.
그렇게 만들어진 컴포넌트는 객체 또는 인스턴스라고 부른다.
new Component()클래스에서의 함수와 변수 사용법
클래스에서 함수와 변수를 사용할때는 function, let, const 를 붙이지 않는다
클래스는 class라는 키워드가 필요하다.
Component로 상속을 받아야한다.
render() 메소드가 반드시 있어야한다.
class {
// class에서의 함수 작성
sayHi(){
console.log("안녕하세요")
}
// class에서의 변수 작성
sayHi = "안녕하세요"
}클래스에서 만들어진 함수를 메소드 라고 부릅니다.
클래스에서의 상속
클래스에서는 공통 기능을 extens를 통해 상속 해줄 수 있습니다.
//지상 몬스터와 공중 몬스터 만들기
// 공통 기능
//basicFunc{
// hp = 100
// attack(){
// console.log("공격을 시도했습니다.")
// }
//}
// 지상몬스터의 피하기
groundMonster extends basicFunc{
avoid(){
console.log("지상에서 뛰어서 피했습니다.")
}
}
// 공중몬스터의 피하기
flyMonster extends basicFunc{
avoid(){
console.log("공중으로 날아 피했습니다.")
}
}
### 클래스에서의 상속
클래스에서는 공통 기능을 extens를 통해 상속 해줄 수 있습니다class 컴포넌트 생명주기
1. 그리기 → render 인풋창 그리기
2. 그리고 난 뒤 → componentDidMount
3. 그리고 난 뒤 변경 → componentDidUpdate
4. 그리고 난 뒤 사라짐 → componentWillUnmount
함수형 컴포넌트
선언
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;함수형 컴포넌트의 생명주기 훅 useEffect
클래스형 컴포넌트에는 componentDidMout와 같은 생명주기 메서드들이 있다.
그렇다면 함수형 컴포넌트에서의 생명주기관련 훅은 무엇일까?
바로 useEffect 이다.
useEffect
componentDidMount
의존성 배열 []에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됩니다.(1번만 실행)
useEffect(()=>{
console.log("마운트 됨!!")
},[])componentDidUpdate와 비슷
// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행됩니다.
useEffect(()=>{
console.log("수정하고 다시 그려짐!!")
})
// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
console.log("수정하고 다시 그려짐!!")
},[someState])componentWillUnmount
useEffect(()=>{
console.log("수정하고 다시 그려짐!!")
//이부분이 끝나고 진행할 것들
return(()=>{
console.log("여기서 나갈래요!!")
})
})componentDidUpdate와 비슷하지만 다른점 하나는, Mount 되자마자 실행되는 점
💡 useEffect의 실행 시점
→ 생명주기 메서드,훅 은 기본적으로 렌더(화면그리기) 이후에 실행됨.
따라서 useEffect와 lifecycle 메서드는 렌더 이후에 실행된다.
차이
클래스형
- state, lifecycle 관련 기능사용 가능
- 메모리 자원을 함수형 컴포넌트보다 조금 더 사용
- 임의 메서드를 정의 가능
함수형 - state, lifecycle 관련 기능사용 불가(그러나, Hook이 있음)
- 메모리 자원을 함수형보다 덜 사용
- 컴포넌트 선언이 편함
