useState

• 상태변수와 세터 함수
• useState의 인수는 상태의 초기값
  • useState(0), 초기화는 동기적으로 수행
• 상태변수는 읽기 전용
  • 상태를 변경하려면 반드시 세터 함수 사용
• 상태 변경 시, 컴포넌트 재 렌더링
• 상태 업데이트는 비동기 처리 및 배치 처리 될 수 있다
• flushSync를 사용하면 동기적으로 상태 변경 가능
  • flushSync() ⇒ setCount(c⇒c+1);
• 변수가 객체형이라면, spread 연산자로 사본을 만들어 할당 : 불변성을 유지하고 예기치 않은 부작용을 방지
• 상태변경이 일어나면 리렌더링이 트리거되고, painting과 display과정이 이루어짐(16ms 내외)
• 16ms throttle : 상태 업데이트가 0.1ms 단위로 자주 일어나더라도 16ms로 상태변경이 고정
  • 여러 상태변경을 한 번의 리렌더로 묶어서 처리

useRef

• 특정 DOM 요소나 값을 저장하고 이를 직접 참조할 때 사용
• useRef 클래스형 컴포넌트의 ref 속성에 해당
• 함수형 컴포넌트에서도 쉽게 DOM 접근 및 저장된 값을 유지

import React, { useRef } from "react";

function MyComponent() {
  // useRef를 사용하여 참조 객체 생성
  const myInputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    // current 프로퍼티를 통해 input 요소에 접근
    if (myInputRef.**current**) {
      myInputRef.current.focus(); // input 요소에 포커스 설정
    }
  };

  return (
    <div>
      **<input ref={myInputRef} type="text" /> // input 요소에 useRef 지정**
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

// 사용 예시
function App() {
  return (
    <div>
      <MyComponent></MyComponent>
    </div>
  );
}

export default App;

• .current 프로퍼티 : useRef에 의해 참조된 DOM 요소나 값
  • useRef로 설정한 값은 컴포넌트가 다시 렌더링될 때도 유지됨
  • 리렌더링이 발생해도 useRef의 .current 값은 바뀌지 않음
• useRef의 값이 변경되어도 컴포넌트가 다시 렌더링되지 않음
• createRef : 클래스형 컴포넌트에서 주로 사용
  • 컴포넌트가 렌더링될 때마다 새로운 Ref 객체를 생성
  • useRef는 동일한 Ref 객체 반환
• useRef 사용하면 직접 DOM 요소의 값을 읽거나 설정이 가능
  • 보통 DOM의 값을 업데이트하거나 접근할 때 onChange와 같은 이벤트 핸들러를 사용
  • <input ref={xRef}> → xRef.current는 해당 DOM 요소를 가리킴
• 함수형 컴포넌트는 forwardRef 사용

useState vs. useRef

• 렌더링
  • useState : 상태가 변경될 때마다 컴포넌트를 다시 렌더링
  • useRef : 다시 렌더링하지 않음
• 용도
  • useState : 컴포넌트의 상태를 관리하는데 사용
  • useRef : 특정 DOM 요소에 대한 참조를 저장하거나 렌더링 간 값 유지에 사용
• 초기화
  • useState : 초기값을 인자로 받으며, 상태 업데이트마다 다시 렌더링
  • useRef : .current 프로퍼티에 초기값을 설정, 이 값은 컴포넌트가 unmount될 때까지 유지

forwardRef

• 부모 컴포넌트가 자식 컴포넌트의 DOM 노드나 인스턴스에 직접 접근할 수 있도록 만드는 기능
• 부모 컴포넌트가 자식 컴포넌트 내부의 특정 요소를 제어하거나 참조해야 할 때 사용할 수 있음
• 일반적으로 부모는 자식 컴포넌트의 DOM에 접근 불가
  • 접근해야 할 때가 있음(포커스, 스크롤 위치 조정 등)
• 함수형 컴포넌트를 인자로 받아, 해당 컴포넌트에 ref를 전달할 수 있도록 함
• 두 개의 인자
  • props : 부모 컴포넌트에서 전달된 모든 속성을 포함
  • ref : 부모 컴포넌트에서 전달된 ref
• (…props) : 부모 컴포넌트에서 전달된 모든 props를 input 요소에 전달

useImperativeHandle

• 자식 컴포넌트가 부모 컴포넌트에 노출할 인스턴스 값을 명시적으로 정의할 수 있게 해주는 hook
• forward와 함께 사용되며, 부모 컴포넌트가 자식 컴포넌트의 특정 함수나 값을 직접 호출하거나 사용할 수 있도록 해준다
• 보통 ref는 DOM 요소에 접근하거나 컴포넌트 인스턴스를 가리킬 때 사용
  • useImperativeHandle : 부모 컴포넌트가 자식의 특정 메서드나 속성을 제어할 수 있도록 선택적으로 노출
  • 자식 컴포넌트 내부의 특정 로직에 부모가 접근하도록 허용