[React] Hooks란? / 리엑트 생명주기(클래스형, 함수형)

React Hooks란?

React Hooks는 class없이 state를 사용할 수 있는 기능입니다.

React Hooks가 필요한 이유는?

항상 기술은 이전의 불편함, 문제점을 개선하기 위해서 발전합니다.
React Hooks도 클래스형 컴포넌트의 불편함이나 문제점을 해결하기 위해 개발되었습니다.

 

원래 리액트는 주로 클래스형 컴포넌트를 사용하고 ,
Hooks는 함수형 컴포넌트를 사용하기 때문에 어떤 차이점이 있는지 보겠습니다.

(좌) 클래스형 컴포넌트 / (우) 함수형 컴포넌트

함수형 컴포넌트는 기능이 더 적다?

리엑트에는 생명주기가 있습니다.

 

클래스형 컴포넌트에는

componentDidMount, componentDidUpdate, componentWillUnmount 같은 아주 중요한 생명주기가 있습니다.

함수형 컴포넌트에서는 사용을 못했기 때문에 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형을 사용했습니다.

 

React 16.8 Hooks 업데이트로 사용할 수 있게 되었습니다.

함수형 컴포넌트에서도 생명주기를 사용할 수 있기에

컴포넌트 시작과 동시에 API도 호출하고, 데이터도 가져오고, 많은 부분을 할 수 있게 되었습니다.

 

특히 생명주기를 이용할때 매우 간결해젔습니다.

 

클래스의 생명주기

constructor → render() → ref → componentDidMount 

(setState/props 값 변경시) → shouldComponentUpdate true반환시 → render → componentDidUpdate

부모 컴포넌트가 자식을 없앴을 떄 → componentWillUnMount → 소멸

(좌) 클래스형 생명주기 / (우) 함수형 생명주기

3가지로 처리를 해주던 클래스형 컴포넌트와 다르게, Hooks를 사용시 useEffect 안에서 다 처리를 해줄 수 있습니다.