S4) Unit 4. [React] React Hooks

📣  Hook 이란?

𝟭. Hook

✔️ 함수 컴포넌트에서 사용하는 메서드

➰ 함수 컴포넌트 이전에는 클래스 컴포넌트가 있었다.

 

𝟮. Class Component

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
        this.handleIncrease = this.handleIncrease.bind(this);
    }

    handleIncrease = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }

    render(){
       return (
            <div>
                <p>You clicked {this.state.counter} times</p>
                <button onClick={this.handleIncrease}>
                    Click me
                </button>
            </div>
       ) 
    }
}

➰ 단순히 카운팅 기능만 하는 컴포넌트를 만들더라도 위처럼 복잡한 코드를 작성해야 했다.

➰ 이해하기 어렵고, 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다는 단점이 있다.

➰ 또한 this를 제대로 이해하지 못하면 동작 방식 자체가 어렵게 느껴진다.

 

𝟯. Function Component

function Counter () {
    const [counter, setCounter] = useState(0);

    const handleIncrease = () => {
        setCounter(counter + 1)
    }

    return (
        <div>
            <p>You clicked {counter} times</p>
            <button onClick={handleIncrease}>
                Click me
            </button>
        </div>
    )
}

➰ 클래스형 컴포넌트에 비해 훨씬 더 직관적이고, 보기 쉽다.

➰ 또한 useState() 처럼 Hook을 사용해서 컴포넌트가 리렌더링 되어도 state가 유지될 수 있게 구현할 수 있다.

 

𝟰. Hook 이란?

✔️ Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.

➰ 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드

➰ Hook은 클래스형 컴포넌트에서는 동작하지 않는다 => 사용하면 에러 띄운다.

 

𝟱. Hook 사용 규칙

1️⃣ 리액트 함수의 최상위에서만 호출해야 한다.

✔️ 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 수 있다.

...
if(counter) {
    const [sample, setSample] = useState(0);
}
...

➰ useState를 조건문 안에서 호출하면 안 된다는 Error를 띄운다.

➰ React는 이 Hook을 호출되는 순서대로 저장을 해놓는데, 조건문이나 반복문에서 호출하게 되면 호출되는 순서를 저장하기 어려워진다.

 

2️⃣ 오직 리액트 함수 내에서만 사용되어야 한다.

✔️ 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 된다.

...
window.onload = function () {
    useEffect(() => {
        // do something...
    }, [counter]);
}
...

➰ window.onload라는 함수에서 useEffect를 호출하면 안 된다는 Error를 띄운다.

➰ Hook은 React의 함수 컴포넌트 내에서 사용되도록 만들어진 메소드이기 때문에 근본적으로 일반 JavaScript 함수 내에서는 정상적으로 돌아가지 않는다.

---

📣  useMemo란?

𝟭. useMemo

✔️ 특정 값(value)를 재사용하고자 할 때 사용하는 Hook

import { useMemo } from "react";
function Calculator({value}){
    const result = useMemo(() => calculate(value), [value]);
    return <>
      <div>
        {result}
      </div>
    </>;
}
// props로 넘어온 value 값을 calculate 라는 함수에 인자로 넘겨서 
// result 값을 구한 후, <div> 엘리먼트로 출력

➰ 렌더링을 할 때마다 이 함수를 호출하게 되면, 계산에 걸리는 몇 초의 지연이 렌더링에도 영향을 미칠 것이다.

➰ useMemo를 사용해서 value 값을 어딘가에 저장을 해놨다가 다시 꺼내서 쓸 수 있게 만든다.

(호출되는 함수를 메모리에 저장하는 게 아님!)

➰ 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해서 value값이 동일한 경우에는 이전 렌더링의 value 값을 그대로 재활용 할 수 있게 된다 => 메모이제이션

 

𝟮. Memoization

✔️ 기존에 수행한 연산의 결과값을 메모리에 저장을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

➰ 굳이 중복 연산을 할 필요가 없기 때문에 앱의 성능을 최적화할 수 있다.

---

📣  useCallback 이란?

𝟭. useCallback

✔️ 함수의 재사용을 위해 사용하는 Hook

/* useCallback를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import React, { useCallback } from "react";

function Calculator({x, y}){

	const add = useCallback(() => x + y, [x, y]);

	return <>
      <div>
					{add()}
      </div>
  </>;
}

➰ useCallback Hook을 사용하면 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다.

➰ 즉, x와 y의 값이 동일하다면 다음 렌더링 때 이 함수를 다시 사용한다.

➰ useCallback은 함수를 호출을 하지 않는 Hook이 아니라, 그저 메모리 어딘가에 함수를 꺼내서 호출하는 Hook이기 때문에 useMemo에 비해서 최적화를 느낄 수 없다.

➰ 단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기 위해서 useCallback을 사용하는 것 보다는 자식 컴포넌트의 props로 함수를 전달해줄 때 사용하는 게 좋다.

 

𝟮. useCallback과 참조 동등성

➰ React는 리렌더링 시 함수를 새로 만들어서 호출하며, 이 함수는 기존의 함수와 같은 함수가 아니다.

(JS에서 함수는 객체이기 때문에 메모리에 저장할 때 값을 저장하는 게 아니라 값의 주소를 저장하기 때문)

➰ useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다고 볼 수 있으므로 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 막을 수 있다.

---

📣  Custom Hooks 란?

𝟭. Custom Hooks

✔️ 개발자가 스스로 커스텀한 훅

 

✔️ Custom Hook의 장점

➰ 반복되는 로직을 함수로 뽑아내서 재사용 할 수 있다.

➰ 상태 관리 로직의 재활용이 가능하다.

➰ 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.

➰ 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다.

 

✔️ Custom Hook을 정의할 때의 규칙

➰ Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것

➰ 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킨다.

➰ Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은 조건부여서는 안 된다. 그렇기 때문에 아래의 이 useFriendStatus Hook은 온라인 상태의 여부를 boolean 타입으로 반환하고 있다.

 

𝟮. 온라인인지 오프라인인지 확인하는 함수

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

➰ 일반 함수에서는 불가능 하지만, custom Hook은 내부에 React 내장 Hook을 사용할 수 있다.

➰ 같은 custom hook 을 사용했다고 해서 두 개의 컴포넌트가 같은 state를 공유하는 것은 아니다.

➰ state는 컴포넌트 내에서 독립적으로 정의되어 있다.