React Utils

@teamsparta/react에서 제공하는 유틸리티 함수 모음입니다.

---

createContext

React Context와 Provider, useContext를 간편하게 생성하는 팩토리 함수입니다.

API

function createContext<ContextValue extends object | null>(
  rootComponentName: string,
  defaultContext?: ContextValue
): readonly [
  Provider: (props: ContextValue & { children: ReactNode }) => ReactElement,
  useContext: (consumerName: string) => ContextValue
];

• rootComponentName: Provider의 displayName과 에러 메시지에 사용됩니다.
• defaultContext: 기본값이 제공되지 않고 Provider 바깥에서 useContext를 호출하면 에러를 throw합니다.
• Provider는 children을 제외한 모든 props를 context value로 사용합니다.
• Provider의 value는 useMemo로 최적화됩니다.

사용 예시

// Context 생성
const [FormProvider, useFormContext] = createContext<{
  values: Record<string, string>;
  onChange: (name: string, value: string) => void;
}>('FormContext');

// Provider 사용
function Form({ children }) {
  const [values, setValues] = useState({});
  const onChange = (name: string, value: string) =>
    setValues(prev => ({ ...prev, [name]: value }));

  return (
    <FormProvider values={values} onChange={onChange}>
      {children}
    </FormProvider>
  );
}

// Consumer 사용
function FormField({ name }) {
  const { values, onChange } = useFormContext('FormField');
  return (
    <input
      value={values[name] ?? ''}
      onChange={(e) => onChange(name, e.target.value)}
    />
  );
}

---

mergeRefs

여러 개의 Ref를 하나로 병합하여 반환합니다. 하나의 element에 여러 ref를 연결할 때 사용합니다.

API

function mergeRefs<T>(
  ...refs: Array<RefObject<T> | RefCallback<T> | null | undefined>
): RefCallback<T>;

사용 예시

// forwardRef와 내부 ref를 동시에 사용
const MyInput = forwardRef((props, parentRef) => {
  const internalRef = useRef(null);
  return <input ref={mergeRefs(internalRef, parentRef)} />;
});

// DOM 측정 callback ref와 일반 ref 함께 사용
function Component() {
  const elementRef = useRef(null);
  const measureRef = useCallback((node) => {
    if (node) console.log(node.offsetHeight);
  }, []);

  return <div ref={mergeRefs(elementRef, measureRef)} />;
}