리액트의 함수형 컴포넌트에서 상태를 관리하는 훅(Hook)들이다. 두 기능 모두 중요하지만 서로 다른 목적과 특성을 가지고 있다.

1. useState

함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 훅이다. 상태가 변경되면 컴포넌트가 다시 렌더링된다.

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

이는 마치 스마트 냉장고의 온도 조절 장치와 같이 동작한다.

1. 온도 표시창(state): 현재 냉장고의 온도를 보여줌
2. 온도 조절 버튼(setState): 이 버튼을 통해 온도를 변경
3. 자동 반응 시스템: 온도를 변경하면 냉장고가 바로 작동해 새로운 온도에 맞춤

useState 기본 사용법

import React, { useState } from 'react';

function Counter() {
  // 초기값 0으로 상태 생성
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>현재 카운트: {count}</p>
      {/* 버튼 클릭 시 상태 업데이트 */}
      <button onClick={() => setCount(count + 1)}>
        클릭
      </button>
    </div>
  );
}

useState의 주요 특징

1. 리렌더링(Rerendering) 발생: state가 변경되면 컴포넌트가 다시 렌더링된다.

2. 비동기적 업데이트: setState는 비동기적으로 작동함

3. 이전 상태 참조: 함수 형태로 업데이트할 수 있음

   // 이전 상태를 기반으로 업데이트
   setCount(prevCount => prevCount + 1);
   

2. useRef

.current 속성을 가진, 변경 가능한 객체를 반환하는 훅이다. 이 객체는 컴포넌트의 전체 생명주기 동안 유지된다.

const refContainer = useRef(initialValue);

이는 마치 비밀 메모장과 같다.