우리는 함수형을 배웠지만 오늘은 class형을 배울것이다.
최근들어 많은 기업들이 함수형으로 넘어가고 있는 추세지만
기존부터 서비스 되고있던 웹의경우 아직 함수형을 적용하지 못한 경우가 있어 class형을 배워둘 필요가 있기 때문이다.
class란?
쉽게 보자면 물건만드는 설명서라고 볼수있다.
class에서 사용되는 함수를 우리는 메소드라고 부른다.
위의 사진처럼 class를 이용해 만든것들을 객체라고 한다.
허나. 저 위에 있는 주황글씨는 자바스크립트에 내장되어있는 기능으로
내장객체라고 부른다. 그럼 선언 방법을 알아보자!
위의 사진을 가장 기본틀로 사용하게 된다.
클래스 안에서 state나 counter등의 기능을 이용할때는
this를 이용해줘야 된다.
this는 class나 객체에 포함되지 않으면 최상위 루트인 윈도우를 가르킨다 그래서 this를 바인딩 시켜줘야 한다.
사진에서 보면 console에 있는 this는 윈도우에서 작동하는 this이지만.
온클릭이라는 기능에 바인딩을 해줌으로서 디스에게
"너는 온클릭에서 사용되는거야~" 라고 정의 해주는것이다.
다른 방법으로는 렉시컬 디스라는 방법이 있는데
위의 사진처럼 온클릭 카운터라는 기능에 화살표 함수를 이용해 정의해주면
따로 바인딩을 해주지 않아도 this에게 어디에서 작동하는지 정의해줄수 있다.
컴포넌트 생명주기
대표적인 몇가지 기능이다. (실행 우선순위 순서)
Did mount의 사용 예시이다.
의존성 배열(dependency array)
의존성 배열은 대괄호 안에있는 것에 의존하기 때문에 의존성 배열이라고 부른다.
의존성 배열이 없으면 뭐 하나라도 바뀌는 경우에 무조건 다시 실행한다.
클래스 컴포넌트의 DidUpdate와 비슷한 역할을 한다.
예를 들어 의존성 배열에 count가 있다면 그 카운트가 바뀌는경우에 실행이 되지만 그게 아니라면 count가 아닌 어떤 무엇이라도 바뀌면 바로 실행이 되는것이다.
class형을 함수형으로 변경한 예시
-- class형 --
-- 함수형 --
componentDidMount는 최초 1회만 실행된다.
이 기능을 여러번 실행하려면 아래 사진과 같이 이용한다.
참고!
무한루프다... 왜냐면 랜더링이 될때 카운트가 1이 증가하게 설정하였는데 디펜던시 값에 count를 주었기 때문에 누르지 않아도 랜더링이 될때마다 1씩 자동으로 증가한다. 그러면 어후.. 컴퓨터가 뜨거워진다고 한다.. 쓰지말자 제발.....ㅜㅜㅜ (뜨거워질까봐 주석처리함)
useEffect와 axios
axios를 이용하여 openApi를 이용할때는 위의 사진처럼 이용한다.
이상 끝.
