[React 16] - Refactoring, Class-component, Component LifeCycle

🏁 오늘의 목표

1. 스프레드 연산자로 리팩토링 하기
2. Class Component
3. 컴포넌트 생명주기 Component Lifecycle

---

1. 스프레드 연산자로 리팩토링 하기

2. Class Component

Class

class란 설명서를 의미한다.

다음은 Date라는 클래스이다. Date 안에는 변수(체력, 경험치 등...)도 들어갈 수 있고 함수(도망가기, 공격하기 등 ...)도 들어갈 수 있다. 여기서 date라는 아이를 객체 또는 인스턴스 라고 부르고 getFullYear()라는 함수들은 메서드라고도 한다. 사실 함수(메서드)를 따로 따로 3개를 만들어도 되지만 하나로 집중시켜놓기 위해서 객체로 만든 것이다.

new Date()처럼 기본적으로 내장되어 있는 객체인 Date를 내장객체라고 하고 date를 객체 혹은 인스턴스라고 한다. 이런 방식으로 하는 개발을 객체지향프로그래밍 OOP(Object Oriented Programming) 이라고 한다.
(백엔드에서는 개발시간 단축과 유지보수가 쉬운점 때문에 객체지향프로그래밍을 주로 사용하곤 한다.)

Class Component 와 Functional Component

Class Component 클래스형 컴포넌트

• Hook 없이 state,LifeCycle 구현 가능
• function,let,const 붙이지 않음
• 명시적인 표현방법
• 기능이 조금 더 많음

Functional Component 함수형 컴포넌트

• Hook을 이용한 state와 LifeCycle 구현
• 클래스형에 비해 간결한 표현

Class Component

이제 이 class를 이용해서 counter 컴포넌트를 하나 만들어보자.

class 컴포넌트에서 this가 class로 인식하게 하기 위해서 화살표 함수를 사용하거나 .bind()를 사용할 수 있다.

3. 컴포넌트 생명주기 Component Lifecycle

Class Component

1. render - 그리기
2. componentDidMount - 그리고 난 뒤
3. componentDidUpdate - 그리고 난 뒤 변경됐을 때
4. componentWillUnmount - 그리고 난 뒤 사라질 때

이걸 똑같이 함수형 컴포넌트로 만들어보자.

Functional Component

함수형 컴포넌트에서는 useEffect 하나로 함수형 컴포넌트의 생명주기를 표현할 수 있다. useEffect의 두번째 인자로 들어가는 배열이 매우 중요한 역할을 한다. 우리는 이것을 의존성 배열(dependency array)이라고 부른다.

📌 useEffect의 잘못된 사용 예

다음처럼 코드를 작성하게 되면 1. 불필요한 추가 렌더링과 2.무한루프 를 일으킬 수 있다. 그래서 // 가급적이면 useEffect 안에 setState 사용을 권장하지 않는다.

useEffect(()=>{
   setCount(prev => prev + 1)
 },[count])