Lifecycle

Class vs Function

공통점

• 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하다.

Class 형

• state와 lifecycle을 사용할 수 있다.
• 임의 메소드를 정의할 수 있다.
• 클래스형 컴포넌트에서는 클래스 내의 constructor 메서드에서 state의 초기값을 생성해 주어야 한다. 그리고 constructor를 작성할 때 super(props)를 반드시 호출해 주어야 한다. state를 조회할 때는 this.state로 조회하며, state의 값을 변경하고 싶을 때는 this.setState 함수를 통해서 바꾸어 준다

Function 형

• 클래스형 컴포넌트에 비해 선언방식이 편하다.
• 클래스형 컴포넌트에 비해 함수형 컴포넌트가 메모리 자원을 덜 사용한다.
• state와 lifecycle을 사용할 수 없다는 단점이 있었지만 react hook 기능이 도입되어 해결되었다.

현재는 React 공식 문서에서 함수형 컴포넌트와 훅을 사용할 것을 권장하고 있다.

React hooks

React hooks을 도입하게 된 이유

• 클래스형의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점이 있다.
• 함수형 컴포넌트는 리렌더링이 될 때 함수 안에 작성된 코드가 다시 실행되어 기존의 상태를 관리할 수 없는 단점이 있다.

공식홈페이지에 따르면 Hook을 만든 이유는 다음과 같다.

1) 컴포넌트 사이에서 상태 로직 재사용의 어렵다. (render props, HOC 등)
2) 복잡한 (클래스형) 컴포넌트들을 이해하기 어렵다. (각종 생명주기 함수들)
3) 클래스 자체 개념을 이해하기 어렵다. (this 등)

hook 사용 규칙

• 최상위에서만 hook을 호출해야한다.

  • 반복문, 조건문, 중첩된 함수 내에서 hook을 실행할 수 없다.
  • 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 hook이 호출된다.

• 리액트 함수 컴포넌트에서만 hook을 사용할 수 있다.

  • 자바스크립트 함수 안에서는 hook을 사용할 수 없다.
  • custom hook에서는 호출할 수 있다.

• hook 만들때 앞에 use 를 붙여야 한다.

• react에서 hook은 호출되는 순서로 동작한다.