React의 컴포넌트 선언 방식인 클래스형 컴포넌트와 함수형 컴포넌트,
그리고 useEffect까지 이어서 알아보자.
클래스형 컴포넌트는 요즘은 권장되지않는 방식이지만 함수형 컴포넌트와 hook이 등장하기 전까지 사용되었던 방식이기때문에 아직 사용하고 있는 기업들이 있으니 이해하고 넘어가야 좋을듯 하다.
클래스형으로 카운트업 버튼을 만드는 코드이다.
특이한 건 생명주기 메서드인 this로 바인딩하는 점이다.
this가 컴포넌트 인스턴스를 가리키는 작업을 해주는데 이를 해주지 않는다면 함수가 호출될 때 this가 undefined 상태가 된다.
컴포넌트의 생명주기는 컴포넌트가 나타나고 사라질 때 호출되는 메서드이다.
componentDidMount의 콘솔로그는 화면이 그려지자 마자 콘솔에 찍히고,
componentDidUpdate의 콘솔로그는 카운트 업 버튼을 눌렀을 때 나타난다.
componentWillUnmount는 나가기 버튼을 눌러 화면을 나가기 전에 콘솔에 찍힌다.
그렇다면 함수형 컴포넌트에서의 생명주기 방식은..?
함수형 컴포넌트에서는 생명주기 관련 Hook이 있다.
그것이 useEffect이다.
함수형 컴포넌트 방식으로 useEffect 훅을 사용하여 위의 클래스형 컴포넌트와 동일한 코드를 작성하였다.
useEffect의 중요한 부분으로는 의존성 배열[]이다.
의존성 배열과 return을 적어주지않으면 무한렌더링의 지옥으로... 들어간다..!
useEffect 내에서 setState는 필요한 경우가 아니라면 사용을 안하는 것을 추천한다. 변경된 state가 반복되서 컴포넌트가 다시 그려지기때문에 무한렌더링되기 때문이다.
no record no memory