[React] Hooks

1. useState()

useState란?

• component의 state(상태)를 관리하기 위한 hook이다.
• 상태를 업데이트 할 때 component를 rerendering한다. 

useState 문법

const [state, setState] = useState(initialValue);

• state : 현재 상태 값
• setState : 상태를 변경(업데이트)하는 함수
• initialValue : 상태의 초기값 (숫자, 문자열, 객체, 배열 등 가능)

useState 예제: 카운터

import React, { useState } from 'react';

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

• useState(0)는 count의 초기값을 0으로 설정한다
• button 클릭을 통해 setCount 함수가 호출되며 count를 (증가 시) +1 (감소 시) -1한다. setCount를 호출할 때마다 component가 rerendering된다.

---

2. useCallback()

useCallback이란?

• 함수를 Memoization(메모이제이션)하여 불필요한 재생성을 방지한다 => 성능 최적화
• useCallback은 함수형 component가 rerendering될 때마다 함수가 재생성되는 문제를 해결한다

useCallback 문법

const memoizedCallback = useCallback(() => {
  // 실행할 코드
}, [dependencies]);

• dependencies : 배열 안의 값이 변경될 때만 함수가 재생성 된다

useCallback 예제 코드

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

function Button({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}

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

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // 빈 배열: 컴포넌트가 처음 렌더링될 때만 함수가 생성됨

  return (
    <div>
      <p>카운트: {count}</p>
      <Button onClick={handleClick} />
    </div>
  );
}

• useCallback을 사용하지 않으면 handleClick 함수가 rerendering될 때마다 새로 생성한다
• useCallback을 사용하면 함수는 한 번만 생성되고 memoization된다.