프론트 엔드 4주 1일차 - Class Component

Class Component

클래스는 객체이면서 그 안에 변수나 또다른 객체와 그 변수 혹은 객체를 이용한 함수들이 정의되어 있으며 이를 통해서 새로운 객체를 만들 수 있습니다. 

 

 예시 코드

위 예시 코드를 보며 설명한다면 위의 Monster라는 객체를 통해서 monster라는 객체를 만들기도 하며 Monster를 상속받은 SuperMonster라는 클래스도 만들 수 있다는 것을 확인할 수 있습니다.

 

컴포넌트의 생명 주기

컴포넌트의 생명 주기는 크게 4단계로 나뉩니다.

 

1. Rendering

2. Rendering 후

3. Rendering 후 State의 변경

4. Rendering 후 닫기 혹은 이동

 

이렇게 4단계로 나눌 수 있으며 각각에 경우에 해당할 때 클래스는 componentDidMount, componentWillUnmount 등을 사용해서 함수는 useEffect를 사용해서 이 때마다 함수를 실행하는 것 또한 가능 하다.

 

예시 코드 - Class 컴포넌트

예시 코드 - Function 컴포넌트

위의 예시처럼 나타낼 수 있습니다.

 

각 주기마다 실행하려면 써야하는 메서드 

	Class	Function
렌더링	componentDidMount	useEffect
State값이 바뀌었을 때	componentDidUpdate	useEffect
종료 혹은 이동	componentWillUnmount	useEffect

 

 

useEffect와 open-API

그냥 return 위에 구문에 API를 요청하는 것 보다 useEffect를 사용하면 리렌더링면에서 더 효율적으로 작동시킬 수 있습니다.

 

 

오늘의 알고리즘

 

 

오늘의 코딩 결과