스테이트 생명주기
생명주기는 class형 컴포넌트를 사용할때부터 있던 방법이다.
클래스형 컴포넌트에서는 여러가지 내장함수를 이용해 기능을 만들었다
1.그리기 = render()
2. 그리고 난 뒤 = componentDidMount()
3. 그리고 난 뒤 변경됬을 때. = componentDidUpdate()
4. 그리고 난 뒤 사라질 때. = componentWillUnmount()
위와 같은 내장함수들을 각각 때에 맞춰 사용햇다.
하지만 지금은 대 함수형컴포넌트 시대이기 때문에 사용하지 않는다.
저 4가지를 단 한개의 hook으로 사용할 수 있다.
바로 useEffect를 이용하는 것이다.
render는 모든 useEffect의 적용된다. 컴포넌트가 렌더링 될대 useEffect가 렌더링된다.
useEffect
useEffect(() => {
console.log("hi")
}, [])
이렇게 만들어주면 의존성배열이 변경될때마다 렌더링이 된다.
하지만 지금은 의존성 배열이 비어있기 때문에 재 렌더링이 되지않고
실행될 때만 렌더링된다.
그리고 컴포넌트가 어떤 경로로든 사라질때 Hi를 출력하는 함수를 만들어보자
useEffect(() => {
return (() => {
console.log("hi")
})
})
위 코드처럼 만들면 컴포넌트가 종료될때 콘솔에 hi가 찍히게 된다.
