[React] 라이프사이클(클래스형vs함수형) / react hooks

안치영·2022년 10월 17일
0

React

목록 보기
10/15

라이프사이클?
생명주기를 말하고, 컴포넌트가 렌더링을 준비하는 시점부터, 페이지에서 사라질때(unmount)까지의 사이클을 말한다.

라이프사이클에는 9가지 단계가 있는데, 크게는 3가지로 나눈다.

  • Mount : 컴포넌트가 생성되고, 브라우저에 처음 나타났을 때
  • Update : 4가지의 경우로 인해 부모컴포넌트가 렌더링할 때
    • props 변경
    • state값 변경
    • 부모 컴포넌트 리렌더링
    • 강제 업데이트
  • Unmount : 컴포넌트가 브라우저에서 사라질 때

클래스형 라이프사이클

  • render 메소드와 Component 상속이 필수
  • state, props 사용이 불편하고, 많은 메모리를 사용한다는 단점이 있다.

함수형 라이프사이클

  • 간편한 컴포넌트 선언 , React Hook을 사용
  • state와 생명주기메소드를 별도로 구현해야함(useState, useEffect)

React Hooks

함수형 컴포넌트에서 사용되는 함수들을 Hook이라고 부른다.

useState, useEffect 등등 앞에 use가 붙은 함수들을 말한다.

처음 리액트는 클래스형 컴포넌트를 사용했다.
하지만 클래스형을 사용할 때 코드의 재사용성 저하, 코드 구성의 난이도 상승하는 등 여러가지 문제가 많았고 진입장벽이 너무 높았다. 그리고 최신기술의 적용이 효과적이지 않았다.

이런 단점들을 함수형 컴포넌트를 사용함으로 인해 극복할 수 있지만, 클래스 컴포넌트의 장점이었던 state사용이나 생명주기를 직접 다루는 기능을 사용하지 못했기 때문에 Hook이 등장해서 모든것들을 해결해 주었다.

그러므로 Hook을 통해 클래스형 컴포넌트의 장점이었던 state와 생명주기를 다루는 기능들을 사용할 수 있는것이다.

0개의 댓글