컴포넌트의 LifeCycle

Mount : 컴포넌트가 보이는 순간 또는 장착되는 순간
Unmount : 컴포넌트가 없어지는 순간
→ 다른 컴포넌트로 페이지를 이동하여 기존 컴포넌트가 사리지는 순간
Update : 컴포넌트 안에서 state를 조작하게 되는 순간

• 컴포넌트의 LifeCycle를 알고 있으면 중간중간 갑섭가능
• 컴포넌트가 장착이나 업데이트,삭제될 때 간섭(특정 코드 실행)을 해줄 수 있다
• 간섭 특정코드는 갈고리(실행코드)를 달아 주는 것이다.

🪝갈고리 다는 방법

✔️클래스형 컴포넌트에서 갈고리 다는 방법

class Detail2 extends React.Component {
	componentDidMount(){
    	//컴포넌트 mount 시 여기 코드 실행된다.
    }
    componentDidUpdate(){
		//컴포넌트 update시 여기 코드 실행된다.
    }
    compoentWillUnmount(){
		//컴포넌트 unmount시 여기 코드가 실행된다.
	}
}

❗️최근에는 클래스형 컴포넌트 방식보단 함수형 컴포넌트를 사용하여 useEffect를 사용한다.

✔️함수형 컴포넌트에서 갈고리 다는 방법

mount, update 시 코드 실행해주는 useEffect

//디테일 컴포넌트
function Detail(){
  useEffect(()=>{
      ~~~ //mount, update시 여기 코드 실행된다.
  })
}

useEffect라는 왜 이름을 붙였졌을까?
side Effect: 함수의 핵심기능과 상관없는 부가기능 → 이 용어에서 파생됨
useEffect 안에 있는 것들은 side Effect(html 렌더링 기능이 아닌 것) 코드들 보관함이다.