[React] Hook 정리

useState()

useState() : state를 사용하기 위한 Hook, 상태를 관리해주며 값이 변하면 렌더링이 일어남 (최상위에서만 Hook호출이 가능하며, 리액트 함수 컴포넌트 내에서만 호출이 가능함)

특징) state 변화 -> 렌더링 -> 컴포넌트 내부 변수 초기화

사용법
const [변수명, set함수명] = useState(초기값);
getter:값가져옴
setter:값변경

import React from 'react';

const Test10 = () => {
    let count = 0;
    
    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => count++}>클릭</button>
        </div>
    );
};

export default Test10;

count를 함수의 변수로 선언해서 사용하면 버튼을 클릭 시 카운트 값은 증가되겠지만,
재렌더링되지 않아 새로운 count값이 화면에 나타나지는 않는다.

import React, { useState } from 'react';

const Test10 = () => {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => setCount(count + 1)}>클릭</button>
        </div>
    );
};

export default Test10;

useState를 사용해서 count를 state로 관리하였다.
버튼이 눌렸을 때 setCount를 호출해서 count를 1 증가시킨다.
그리고 count값이 변경되면 컴포넌트가 재렌더링 되면서 화면에 새로운 값이 표시된다.


<참고>
https://codiving.kr/21

[Legacy][React] state, setState, useState 란 무엇일까?

---

useEffect()

useEffect() : 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없다.
리엑트의 함수 컴포넌트에서 side effect를 실행할 수 있게 해주는 Hook.
side effect = 효과, 영향

사용법
useEffect(이팩트 함수, 의존성 배열);
useEffect(이팩트 함수, []); : Effect function이 mount, unmount 시에 단 한 번씩만 실행 된다.
useEffect(이팩트 함수); : 의존성 배열을 생략하면 컴포넌트가 업데이트될 때마다 호출 된다.

useEffect(() => {
    //컴포넌트가 마운트 된 이후,
    //1. 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
    //2. 의존성 배열에 빈 배열 ([])을 넣으면 마운트와 언마운트시에 단 한번씩만 실행됨
    //3. 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨

    return () => {
        //컴포넌트가 마운트 해제되기 전에 실행됨
    }
}, [의존성 변수1, 의존성 변수 2, ...])

---

React.Memo()
props check를 통해서 props 변화가 없다면 렌더링이 되지 않고 기존에 있는 값을 재사용,
props 변화가 있다면 렌더링 됨(ex. useState, useReducer..)

렌더링 횟수를 줄일 수 있어서 좋지만 무분별하게 사용한다면 메모리 낭비할 수 있어서 꼭 필요할때만 사용!

useMemo()

Memoization : 최적화 / 연산량이 많은 함수를 저장해두었다가 같은 함수를 호출할 경우, 새로 함수를 호출하지 않고
이전에 저장해놨던 호출 결과를 바로 반환함
-> 장점 : 호출시간도 짧아지고, 불필요한 중복연산도 하지 않기 때문에 컴퓨터의 자원을 적게 쓰게됨

사용법

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

1) useMemo를 사용하면 컴포넌트가 렌더링 될 때마다 연산량이 높은 작업을 반복 하는 것을 피할 수 있다.
-> 결과적으로 빠른 렌더린 속도를 얻음

2) useMemo로 전달된 함수는 렌더링이 일어나는 동안에 실행됨.
-> 렌더링이 일어났을 때 실행해서는 안될 작업을 useMemo에 넣으면 안됨
ex) useEffect에서 실행해야 될 side effect (서버에서 데이터를 받아오거나, 수동으로 DOM을 변경하는 작업)
-> useMemo 사용x

---

useCallback()

useMemo() Hook과 유사하지만 값이 아닌 함수를 반환함.
컴포넌트가 렌더링 될때마다 함수를 새로 정의하는 것이 아니라 의존성 배열의 값이 변경될 때만 함수를 새로 정의해서 return해주는 것.

사용법

const memoizedCallback = () => useCallback(
    () => {
        doSomething(의존성 변수1, 의존성 변수2);
    },
    [의존성 변수1, 의존성 변수2]
);

import React, { useState } from 'react';

const Test = () => {
    const [count, setCount] = useState(0);

    //렌더링 될 때마다 매번 함수가 새로 정의 됨
    const handleClick = () => {
        //클릭 이벤트 처리
    }

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>{count}</button>
            <ChildComponent handleClick={handleClick} />
        </div>
    );
};

export default Test;

useCallback을 사용하지 않고 컴포넌트 내에서 정의한 함수를 자식 컴포넌트에 props로 넘겨 사용할 경우에
부모 컴포넌트가 매번 렌더링 될 때마다 매번 자식 컴포넌트도 렌더링 된다.
-> 하지만 useCallback을 사용하면 특정 함수 값이 변한 경우에만 다시 정의하게 되므로 함수를 다시 정의하지 않는 경우에는 자식 컴포넌트도 재 렌더링이 일어나지 않음

import React, { useCallback, useState } from 'react';

const Test10 = () => {
    const [count, setCount] = useState(0);

    //컴포넌트가 마운트 될 때만 함수가 정의됨
    const handleClick = useCallback((event) => {
        //클릭 이벤트 처리
    }, []);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>{count}</button>
            <ChildComponent handleClick={handleClick} />
        </div>
    );
};

export default Test10;

컴포넌트가 처음 mount 되는 시점에만 한번 정의되고, 그 이후에는 정의되지 않으므로
컴포넌트도 불필요하게 재 렌더링 되지 않음

---

useRef()

useRef() : Reference(특정 컴포넌트에 접근할 수 있는 객체)를 사용하기 위한 Hook.

refObject.current
-> current는 현재 참조하고 있는 Element

특징) No 렌더링, 렌더링이 되더라도 값을 유지함
변화는 감지하지만 그 값을 렌더링 시키면 안되는 값을 다룰때 편리

사용법

const refContainer = useRef(초기값);

import React, { useRef } from 'react';

const Test = () => {
    const inputElement = useRef(null);

    const onButtonClick = () => {
      inputElement.current.focus();
    };

    return (
        <div>
            <input ref={inputElement} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </div>
    );
};

export default Test;

input 값이 focus 되는 코드임
초기값에 null을 넣었고 결과로 반환된 inputElement 객체를 input 태그에 넣어줌
button 클릭 시 호출되는 함수에서 inputElement.current.focus 실제 element에 접근하여 focus 함수를 호출하고 있다.