라이프사이클(클래스형 vs 함수형)
1) 리액트의 라이프 사이클이란?
: 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 입니다.
그래서 각각의 컴포넌트에는 라이프 사이클(생명 주기)라는 것이 있습니다.
컴포넌트의 수명은 페이지에서 렌더딩 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때까지를 의미합니다.
라이프 사이클은 총 9개가 존재합니다.
크게 세가지 유형으로 나눌 수 있는 데 생성 될 때, 업데이트(수정 될 때), 제거 될 때입니다.
이를 리액트에서는 마운트, 업데이트, 언마운트라고 부릅니다.
➡ 마운트는 DOM이 처음 생성 된 후 웹브라우저 상에 나타나는 것을 의미합니다.
➡ 업데이터는 4가지 상황에서 발생 됩니다.
1) props가 바뀔 때
2) state가 바뀔 때
3) 부모 컴포넌트가 리렌더링 될 때
4) this.forceUpdate로 강제로 렌더링을 트리거 할 때➡ 언마운트는 DOM이 제거 되는 것을 말하고, 이는 웹브라우저 상에서 컴포넌트가 사라지는 것과 같습니다.
React Hooks 란?
Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다.
함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다.
그렇다면 왜 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야할까?
react를 배우는 데에 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있기 때문이다. 또한 클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래스형 컴포넌트에 효과적으로 적용되지 않았다.
클래스의 문법이 어렵다.
축소가 어렵다.
reloading의 신뢰성이 떨어진다.
최신 기술의 적용이 효과적이지 않다.
→ 이러한 클래스의 단점들을 함수형 컴포넌트로 커버할 수 있다. 하지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다. 이를 해결하기 위해 Hook이 등장했다.
Hook 의 기능
- Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
- useState와 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해준다.
출처: https://devbirdfeet.tistory.com/52 [새발개발자:티스토리]
