함수형 컴포넌트

-LifeCycle Methods가 없음. 그 대신 useEffect라는 Hook이 있음.
-useEffect는 Hook이므로 함수

사용법(Mount, Update될 때)

useEffect(()=>{
	console.log(“안녕하세요”) 
}) 

—> 페이지가 리랜더할때 마다 이게 실행됨.(이런 리랜더를 컨트롤할 수 있음. 그것은 바로 두번째 parameter에 있는 배열.)

useEffect(()=>{
	console.log(“안녕하세요”)
} , [])

—> 이 컴포넌트가 로드될때 제일 처음 한번만 실행해라. (리랜더링되어도 한번만 실행하게 됨. 이 useEffect는 눈에 불을 키고 배열만 보는중인데 배열이 비어 있음.)

useEffect(()=>{
	console.log(“안녕하세요”)
} , [color])

—>color라는 변수에 변화가 있을때만 첫번째 코드(함수)를 실행해라

useEffect(()=>{
	console.log(“안녕하세요”)
} , [color, age, height])

—> 두번째 배열안 3개의 변수중 하나라도 변화가 있으면 첫번째 코드(함수)를 실행해라.

사용법(UnMount될 때)

useEffect(()=>{
	console.log(“안녕하세요”)
	return () => {
	 여기 들어가는 코드들은 이 컴포넌트가 해체될때 run하는 코드, 예를 들어 
         network, API connection을 지우고 싶으면 remove code작성
}} , [color])

클래스 컴포넌트

• LifeCycle Methods(컴포넌트의 변화)
• Mount, Update, UnMount (생성, 수정, 삭제)
• componentDidMount(), componentDidUpdate(), componentWillUnmount()