[React] Hooks

🔗 이미지 : React hooks best practices in 2021

React를 사용하다 보면 훅! 이라는 것을 자주 접하게 된다.

🎣 Hook 이 뭔데?

리액트 v16.8에 새로 도입된 기능으로 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.
📖 React를 다루는 기술 책 내용

문장만 봐서는 도저히 훅에 대해 감이 안오는데, 사실 리액트를 막 처음 배우면서 값을 만지는 작업을 했는데 그때 이미 훅을 사용하고 있었다는 사실...!

아래에서도 다루겠지만 바로 useState라는 훅이다.

우선 훅을 사용하기 위해서는 상단에 사용할 훅을 import해야한다.
예를 들어 useState라는 훅을 사용하고 싶다! 그러면 아래와 같이 작성해 주면 된다.

import { useState } from 'react';

이런식으로 우선 사용할 훅을 import 후 자유롭게 사용하면 끝!
이번 글에서는 각 훅이 무엇인지 어떤 때에 사용되는지 정리해 보았다.

🎣 useState

import { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  
  return (
    <div>
    	<p>현재 카운터 값은 <b>{value}</b> 입니다.</p>
    	<button onClick={()=> setValue(value + 1)}> +1 하기</button>
    	<button onClick={()=> setValue(value - 1)}> -1 하기</button>
    </div>
  )
}

간단한 카운터를 useState 훅을 사용해서 만든 코드다.

const [value, setValue] = useState(0);

value는 상태 값이고 setValue는 상태를 설정한다.
useState의 ()안에는 초기값을 지정할 수 있는데, 보통 문자이면 ('')으로 표현하고 숫자면 (0)을 초기값으로 셋팅 해 둔다.

이 함수에 파라미터를 넣어 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 리렌더링 된다.

🎣 useEffect

useState를 사용하면 값이 바뀔 때마다 컴포넌트가 리렌더링이 된다.

하지만 만약 불필요한 리렌더링을 방지한다면 조금은 성능을 향상 시킬 수 있지 않을까?
그래서 바로 useEffect 라는 훅을 사용하면 불필요한 리렌더링을 조금은 방지할 수 있다!

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

우선 위와 같은 타이머가 있다고 하자.
실행을 시켜보면 1초마다 count가 1씩 증가하는 것을 볼 수 있다.

즉, 계속 리렌더링을 하면서 count를 증가 시키고 있다는 것이다.

그렇다면 최초 렌더링할때만 실행되고 업데이트될 때는 실행시키지 않으려면?
이럴때 바로 useEffect의 2번째 파라미터에 빈 배열([])을 추가해 주면 된다.

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []); // <- useEffect의 2번째 파라미터에 빈 배열 추가!

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

위와 같이 추가를 하고 나면 타이머는 최초 렌더링 시 실행만 하고 증가하지 않는다.
즉 마운트될 때만 실행된다.

엇 그러면 특정 값이 업데이트될 때만 실행시키고 싶을 땐 어떻게 할까?
바로 빈 배열에 그 특정 값을 넣어주면 된다!

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- count값이 변경되면 업데이트가 된다!

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

이렇게 원하는 값을 업데이트될 때 실행시킬 수 있다.

🎣 useReducer

useReducer는 useState와 굉장히 유사한 훅이다.
사실 리듀서는 리덕스를 사용하면서 배우게 된 훅이였는데 간단히 정리를 하고 넘어가 보겠다.

import { useReducer } from 'react';

function reducer (state, action) {
	switch (action.type) {
      case 'INCREMENT' :
        return { value : state.value + 1};
      case 'DECREMENT' :
        return { value : state.value - 1};
      default :
        return state;
    }
}

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, {value : 0})
}

return (
	<div>
  		<p>현재 카운터 값은 <b>{state.value}</b> 입니다.</p>
  		<button onClick={()=> dispatch({type: 'INCREMENT'})}> +1 증가</button>
		<button onClick={()=> dispatch({type: 'DECREMENT'})}> -1 감소</button>
  	</div>
)

리듀서의 첫번째 파라미터는 리듀서 함수를, 두번째 파라미터에는 기초값을 넣어준다.

dispatch()는 리듀서의 타입에 따른 return되는 부분을 실행시킨다.
리듀서를 사용한다면 dispatch는 필수로 따라다니는 단짝 친구 같은 존재!

🎣 useMemo

useMomo는 좀 독특한 훅이다. 함수 컴포넌트 내부에서 발생하는 연산을 최적화하는 용도로 사용하기 때문이다.

const memoizedValue = useMemo(() => {
  // 여기에 계산 비용이 높은 작업을 수행합니다.
  // 그 결과를 memoizedValue에 저장하고 재사용합니다.
  return someComputedValue;
}, [dependency1, dependency2]);

useMemo의 첫번째 매개변수는 함수를 받고 이 함수 안에서 계산 비용이 높은 작업을 수행 후 반환한다.
두번째 매개변수는 의존성 배열인데 이 배열에 포함된 값을 변화할 때만 useMomo 내부의 함수가 다시 실행된다. 만약 변화가 없다면 이전에 계산한 결과를 재사용한다.

사실 useMemo의 사용처가 어딜까 궁금했는데 마침 GPT가 좋은 예시를 들어 주었다.

🤖 : useMemo는 React에서 사용하는 도구 중 하나로, 주로 계산이 복잡하거나 시간이 오래 걸리는 작업의 결과를 저장하고 필요할 때 재사용하는 데 사용됩니다. 이를 통해 애플리케이션의 성능을 향상시킬 수 있습니다.

간단한 예를 들어보겠습니다. 가상의 쇼핑 웹사이트를 만든다고 상상해봅시다. 사용자가 상품 목록을 열 때마다 모든 상품의 가격을 다시 계산한다면 매번 시간이 오래 걸릴 것입니다. 이런 상황에서 useMemo를 사용하면 처음 한 번 가격을 계산한 다음, 그 값을 저장하고, 사용자가 목록을 다시 열 때마다 계산을 다시 하지 않고 저장된 값을 사용할 수 있습니다.

간단히 말해, useMemo는 비싼 계산을 저렴하게 만들어주는 도구입니다. 계산 결과를 기억하고, 필요할 때 빠르게 사용할 수 있도록 도와줍니다.

🎣 useCallback

useCallback은 useMemo와 비슷한데, 렌더링 성능을 최적화해야 하는 상황에서 사용하기 때문이다.
이 친구도 useMemo처럼 첫번째 매개변수로 함수를 전달하고, 두번째 매개변수는 의존성 배열이다.

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // 의존성 배열이 비어있으므로 항상 같은 함수를 재사용합니다.

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

useCallback을 사용한 예시인데, handleClick 함수가 ParentComponent가 렌더링될 때마다 새로 생성되지 않고 한 번 생성된 함수를 계속 재사용할 수 있게 도와준다. 이렇게 성능 개선하는데 도움이 된다는 것!

🎣 useRef

useRef는 아직은 포커스를 자동으로 가게 하는 상황에서밖에 사용을 안했다.
다른 예제도 대부분이 오토 포커스를 사용할때 사용해서 😅 이 부분은 좀 더 리액트를 다뤄보면서 확장 시켜 나가야 겠다.

import { useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const inputElement = useRef();

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

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

위와 같이 오토 포커스를 사용하기 위한 input에 ref를 두고 useRef를 사용하겠다고 지정한다.

그리고 이벤트를 이용해서 current.focus();로 지정하면 자동으로 포커스가 내가 지정했던 input으로 이동하게 된다.
여기서 포인트는 current.focus() 해야 된다는 것! current가 꼭꼭 필요하다.

📖 코드 출처: w3scools.com , 리액트를 다루는 기술