7장 React의 훅 (Hooks)

Hook 이란??

원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미

리액트의 훅도 마찬가지로 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행하도록 만든것 

 

대표적이고 많이 사용됨 

useState() : state를 사용하기 위한 Hook 

예시로 아래 코드를 보자 

import React, { useState } from "react";

function Counter(props) {
	var count = 0;
    
    return (
    <div> 
    	<p> 총 {count}번 클릭했습니다. </p>
        <button onClick={() => count++}>
        클릭
        </button>
    </div>
 );
}

위의 코드에서 Counter 컴포넌트는 버튼을 클릭하면 카운트를 하나씩 증가시키고 현재 카운트를 보여주는 컴포넌트이다.

하지만 위 부분에는 재랜더링이 일어나지 않아 새로운 카운트 값이 화면에 표시되지 않게된다. 

이런 경우에 state를 사용해서 값이 바뀔 때마다 재랜더링 되도록 해야한다. 

이때 아래와 같이 사용한다.

const [변수명, set함수명] = uuseState(초깃값);

 

useState만큼 사용을 많이 하는 훅 

useEffect

사이드 이펙트를 수행하기 위한 훅, 일반적으로 말하는 의도치않은 오류와 같은 뜻을 가지는것이 아닌 이펙트의 의미가 더 강함. 

useEffect는 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate(), componentWillUnmount()와 동일한 기능을 하나로 통합해서 제공한다. 

useEffect의 사용법은 아래와 같다.

useEffect(이펙트 함수, 의존성 배열);

여기서 위존성 배열의 뜻은 배열 안에 있는 변수 중에 하나라도 값이 변경되었을때 이펙트 함수가 실행된다는 뜻이다. 

 

useMemo() 훅 : Memoized value를 리턴하는 훅 

파라미터로 memoized value를 생성하는 create 함수와 의존성 배열을 받습니다. 뒤에 나올 메모제이션의 개념처럼 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수를 호출하여 결과값을 반환, 그렇지 않은 경우에는 기존 함수의 결괏값을 그대로 반환합니다. useMemo()훅을 사용하면 컴포넌트가 다시 렌더링될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있음.

아래 예시 코드를 보자 

const memoizedValue -useMemo (
	() = > { 
    	//연산량이 높은 작업을 수행하여 결과를 반환
    	return computeExpensiveValue(의존성 변수1, 의존성 변수2);
    },
    [의존성 변수1, 의존성 변수2]
);

useMemo() 훅을 사용할 때 기억해야 할 점은 useMemo()로 전달된 함수는 렌더링이 일어나는동안 실행된다는 점이다. 

 

useCallback() 훅 : useMemo()와 유사한 역할을 하며 한 가지 차이점은 값이 아닌 함수를 반환한다는 점이다. 

useMemo()와 마찬가지로 함수와 의존성 배열을 파라미터로 받는다. 그리고 의존성 배열에 있는 변수 중 하나라도 변경되면 Memoized 콜백 함수를 반환한다. 

여기서 잠시 계속 등장하는 Memoization 메모이제이션에 대해 잠시 정리하자 메모이제이션은 컴퓨터 분야에서 최적화를 위해서 사용하는 개념이다. 비용이 높은(연산량이 많이 드는) 함수의 호출 결과를 저장해 두었다가, 같은 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해놨던 호출 결과를 바로 반환하는 것이다. 

이렇게 하면 결과적으로 함수 호출 결과를 받기까지 걸리는 시간도 짧아질뿐더러 불필요한 중복 연산도 하지 않기 때문에 컴퓨터의 자원을 적게 사용한다.