[React]리액트 훅 & Life Cycle

• 리액트 훅(Hook)의 등장

리액트의 훅은 버전 16.8부터 새로 추가된 기능으로, 클래스형 컴포넌트의 단점을 보완하기 위한 것이다.

먼저 리액트의 컴포넌트는 클래스형과 함수형으로 나뉜다.

 

클래스형 컴포넌트의 단점으로는

1. 컴포넌트 사이에서 상태 로직 재사용 어려움
   render props나 고차 컴포넌트와 같은 패턴을 사용해서 코드 추적이 어려움
2. 복잡한 컴포넌트들은 이해하기 어려움
   생명주기 메서드에 관련 없는 로직이 섞여 들어가고, 컴포넌트들을 작게 분리하는 것이 불가능 함
3. class를 사용하기 위해서는 javascript의 this에 대해 알아야하는데, 
   javascript의 this는 다른 언어에서와는 다르게 작동해서 혼란스러움

위와 같은 단점들을 보완하고자 훅이 등장!

Hook의 등장으로 함수형 컴포넌트에서 상태와 생명주기 기능을 연동(hook into)할 수 있게 되었다!

리액트의 클래스형 컴포넌트는 생명주기 메서드를 활용하고, 함수형 컴포넌트는 Hook을 사용한다.

먼저 생명주기에 대해 알아보자!

 

• 리액트의 생명주기(Life Cycle)

리액트의 모든 컴포넌트에는 생명주기가 존재한다.

컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 가진다.

생명주기를 잘 사용해서 불필요한 업데이트를 방지할 수 있다.

 

1. 생성(mounting) : 컴포넌트가 처음 실행될 때, mount라고 표현함

 

- constructor

컴포넌트 생성자 메서드로, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드

this.props, this.state에 접근이 가능하고, 리액트 요소를 반환함

 

- getDerivedStateFromProps

props로부터 파생된 state를 가져옴

props로 받아온 것을 state에 넣고 싶을때 사용

 

- render

컴포넌트를 렌더링하는 메서드

 

- componentDidMount

컴포넌트의 첫 렌더링이 완료되면 호출되는 메서드

화면에 컴포넌트가 나타나면 호출됨

주로 DOM을 사용해야 할 때, 컴포넌트에서 api로 데이터를 요청할 때 사용

 

2. 업데이트(updating)

 

- getDerivedStateFromProps

컴포넌트의 props나 state가 바뀌었을때 호출됨

 

- shouldComponentUpdate

컴포넌트의 리렌더링 여부를 결정하는 메서드

 

- componentDidUpdate

컴포넌트가 업데이트 되고 난 후 호출됨

 

3. 제거(unmounting) : 컴포넌트가 화면에서 사라지는 것

 

- componentWillUnmount

컴포넌트가 화면에 사라지기 직전에 호출됨

주로 DOM에 직접 등록했던 이벤트 제거(ex setTimeout)

 

이제 Hook에 대해 알아보자!

 

• Hook의 사용

Hook은 함수형 컴포넌트에서 상태와 생명주기 기능을 연동할 수 있게 해주는 함수이다.

Hook은 class 안에서는 동작하지 않고, class 없이 리액트를 사용할 수 있게 해준다.

또한 컴포넌트를 로직 기반으로 작게 나눌 수 있다.

 

- Hook 사용 규칙

1. 최상위에서만 Hook을 호출해야한다.
   반복문, 조건문, 중첩된 함수 내에서 Hook 실행 X -> 항상 동일한 순서로 Hook이 호출되는 것을 보장해줌
2. 리액트 함수 컴포넌트에서만 Hook을 호출해야한다.
   일반 javascript 함수에서 호출 X

Hook의 종류로는 useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback가 존재한다.

useState를 통해 버튼을 누르면 state가 1씩 증가하도록 하는 예제를 살펴보자.

 

import React, {useState} from 'react';

function Counter() {
	const [number, setNumber] = useState(0);
    
    const onIncrease = () => {
    	setNumber(number + 1);
    }
    
    return (
    	<div>
    		<h1> {number} </h1>
            <button onClick={onIncrease}> +1 </button>
        </div>
    );
}

export default Counter;