16일차) [React/JS] Class/컴포넌트 생명주기/ useEffect /의존성 배열

✍Class

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

class에서는 함수와 변수를 사용할 때 function / let / const 등을 사용하지 않음

ex)

class { 
  // class에서의 함수 작성
  sayHi(){ 
  console.log("안녕하세요")
  }
  
  // class에서의 변수 작성
  sayHi = "안녕하세요
}

💡 또한, class에서는 상속기능이라는 것이 있다(extends)

extends는 기능을 활용할 수 있도록 적는 것(import랑 비슷함)

위는 컴포넌트를 상속 받았기 때문에 counterUp이나 render 기능을 사용할 수 있음

//conut 컴포넌트 
import {component} from 'react'

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

	// class에서의 함수 사용방식 
		onClickCouter = ()=>{
				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가 동일하도록 사용할 수 있도록 하려면?

☑️화살표 함수를 사용
= ☑️렉시컬 this

✍Class 컴포넌트 생명주기

컴포넌트 생명주기란 쉽게 말해
1. 화면에 나타난다 (render)
2. 그리고 난 뒤 (포커스)(componentDidMount)
3. 그리고 난 뒤 변경된다.(componentDidUpdate)
4. 그리고 난 뒤 사라진다.(componentWillUnmount)

✍useEffect

함수형 컴포넌트에서 사용하는 컴포넌트 생명주기

📌 componentDidMount

// 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝남.(1번만 실행)

useEffect(()=>{
		console.log("마운트 됨!!")
	},[])

📌 componentDidUpdate

// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	})


// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	},[someState])

📌 componentWillUnmount

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")

		//이부분이 끝나고 진행할 것들
		return(()=>{
			console.log("여기서 나갈래요!!")
		})

	})

✍의존성 배열

useEffect에서 [ ] 부분
의존성 배열의 인자에 따라 렌더 시점이 달라지기 때문에 주의 해야함(무한렌더링)

💡의존성 배열이 함수형 컴포넌트의 생명주기를 결정하는 포인트!!!!!

❗❗ useEffect에서 setState는 지양!
만약에 사용하면 state변경 -> 리렌더 -> state변경 > 리렌더 무한루프에 빠짐