React Hooks

React Hooks

React 16.8 버전부터 추가된 개념이다. 함수형 프로그래밍을 위해 도입된 기능이며, 클래스를 사용하지 않고도 State를 이용하고 React의 기능들을 사용할 수 있다.

Hooks Rules

• 최상위 코드레벨에서만 Hooks를 호출해야한다. 루프나 조건 혹은 함수 내에서 Hooks을 생성하면 안된다.

• React의 함수 Component에서만 Hooks을 사용해야 한다. 일반 JavaScript에서는 사용할 수 없다.

useState

StateFul한 값과 이를 업데이트할 수 있는 함수를 반환한다.

Example

import React, { useState } from "react";

const [state, stateChanged] = useState<string>('');

// 이런식으로 state를 업데이트할 수 있다. 새 state 값은 Component의 ReRendering 목록에 쌓이게 된다.
stateChanged('변경값');

useEffect

useEffect는 React의 Component에서 DOM 변경, 데이터 변경 등의 이벤트가 일어날 때 발생되는 작업이다. useEffect 하나로 componentDidMount, componentDidUpdate 등의 React 클래스에서 제공한 라이프 사이클 같이 사용할 수 있다.

하나의 컴포넌트에서 여러개의 useEffect를 사용할 수 있다.

Example

import React, { useState , useEffect } from "react";

function EffectEx() {
    const [cnt, cntChanged] = useState(1);
    const [cnt2, cnt2Changed] = useState(1);

    // 두번째 인자를 무엇으로 넣는지에 따라 업데이트 기준을 잡을 수 있다.
    
    // cnt가 변경될 때만 실행
    useEffect(() => {
        console.log(cnt+1);
    }, cnt);

    // 컴포넌트가 처음 DOM에 올라갈 때 실행
    useEffect(() => {
        console.log('first Start');
    }, []);

    // cnt 또는 cnt2 가 변경될 때 실행
    useEffect(() => {
        console.log(`cnt2${cnt2}` );
    }, [cnt, cnt2]);

    return (
        <div>
            <p>Count: {cnt} </p>
            <button onClick={() => cntChanged(cnt+1)}>값 증가</button>
        </div>
    )
}

useMemo

메모리제이션 된 값을 반환하는 Hook이다. 쉽게 말해서 State를 메모리에 적재해 뒀다가 의존성 배열에 넘겨준 값이 변경되었을 때만 새로운 메모리제이션된 값을 반영한다. 복잡한 코드가 매번 리렌더링 될때마다 실행되는 걸 제한하기 위한 최적화를 위한 Hook이다.

import React, { useMemo } from "react";

const [stateVal, valChange] = useState(1)
const [stateVal2, valChange2] = useState(1)

const doubleValue = useMemo(() => stateVal * 2, [stateVal]) 

useMemo로 생성하지 않으면 stateVal2가 바뀔때마다 doubleValue도 항상 새로 계산하게 된다. useMemo로 생성하면 두 번째 인자로 들어가는 stateVal이 변경될때만 doubleValue을 새로 계산한다.

useCallback

메모리제이션 된 함수를 반환하는 Hook이다. useMemo와의 차이는 반환 하는 것에 차이 그 뿐이다.

import React, { useCallback } from "react";

const [stateVal, valChange] = useState(1)
const [stateVal2, valChange2] = useState(2)

const CallbackEx = useCallback(() => MemoValue(stateVal), [stateVal])

useCallback로 만들어 두지 않으면 stateVal, stateVal2 하나라도 값이 변경되면 리렌더링 되면서 CallbackEx 함수가 무조건 선언된다.

위에처럼 useCallback로 선언하고 2번째 인자(여기서는 StateVal) 로 의존할 배열을 채워 놓으면 stateVal이 변경될때만 CallbackEx함수가 선언되게 된다.