[React] hook 사용법 정리

hook의 용도를 알고 사용하고 싶어 자주 쓰는 React hook에 대해서 정리하게 되었습니다.

1. useState()

import { useState } from "react";

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

  return (
    <>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

• 컴포넌트의 상태 관리를 위해 사용함
• count에는 숫자, 문자열, 배열, 객체 등이 들어갈 수 있다.
• 위 코드에서는 버튼을 누르면 count의 상태를 변경 하는 setCount함수가 실행된다.
• 상태가 변경 되면 해당 컴포넌트가 재렌더링 된다.
• useState는 비동기적으로 작동할 수 있음 → 바로 업데이트된 값이 안 보일 수도 있음.
• 비동기적으로 처리하기 때문에(렌더링 이후 업데이트), 위 코드처럼 () => setCount(count + 1) 하면 화면에 업데이트 된 값이 바로 안뜰 수 있음 setCount(prev => prev + 1) 이렇게 쓰면 바로 반영됨

2. useEffect()

import { useEffect, useState } from "react";

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 마운트 시 한 번만 실행
    fetch("/api/data")
      .then(res => res.json())
      .then(setData);

    // 언마운트 시 정리(clean-up)
    return () => console.log("컴포넌트 언마운트");
  }, []);
}

• 컴포넌트의 생명주기에 따라 특정 코드를 실행할 때 사용함
• 기본적으로 이 구조를 가짐: useEffect(function, deps)
• deps자리를 없애면 페이지 렌더링 시마다 function을 실행한다. deps에 [state]로 설정하면state 변경 시 실행,[]로 두면 1번만 실행한다.
• 위 코드에서 보는 것처럼 언마운트 시 clean up을 할 수 있다.

3. useRef()

import { useRef, useEffect } from "react";

function Example() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus(); // DOM에 직접 접근
  }, []);

  return <input ref={inputRef} />;
}

• Dom 요소 변경가능 한 값을 저장할 때 사용
• Dom에 접근하여 Dom조작 가능하게 함
• 값이 변해도 재렌더링하지 않음

4. useContext()

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Example() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme.background }}>테마 적용</div>;
}

• 전역 상태 관리를 하려면 contextAPI 라이브러리와 함께 사용
• props를 여러 단계를 거치지 않고 하위 컴포넌트로 전달할 수 있음

5. useMemo()

• 값을 저장해둘 수 있음
• 다시 계산하려면 오래 걸리는 값을 주로 저장
• 구조: useMemo(fn, deps) deps변할 때마다 fn 실행

// components/Statusbar.tsx
import React from 'react';

function Statusbar({ isChatRoom, isProfile }: { isChatRoom: boolean; isProfile: boolean }) {
  // props에 따라 색상 지정
  const bgColor = isChatRoom
    ? '#111'
    : isProfile
    ? '#f4f4f4'
    : '#ffffff';

  return <div style={{ backgroundColor: bgColor }}>Statusbar</div>;
}

// props가 바뀌지 않으면 재렌더링 방지
export default React.memo(Statusbar);

라우팅이 될 때 props가 변하지 않으면 렌더링을 하지 않도록 함