리액트 고급

Children.only()

.only 함수는 주어진 children이 하나의 React 요소만 포함하고 있을 때 해당 요소를 반환한다. 그렇지 않으면 오류를 발생시킴.

children을 하나만 받을 경우에 사용하면 안정성을 높일 수 있으며, 다른 개발자들에게 컴포넌트 사용에 대한 명확한 의도를 전달할 수 있다.

예시)

interface InputProps extends HTMLAttributes<HTMLDivElement> {
  label?: ReactNode;
  children: ReactElement;
  bottomText?: string;
}

export function Input({ label, children, bottomText, ...props }: InputProps) {
  const child = Children.only(children);

cloneElement

React 요소를 복제하고 해당 요소에 새로운 속성을 전달하는 데 사용된다. (원래 요소의 props와 새로 전달된 props가 모두 포함된 새로운 요소를 반환)

예시)

import React from "react";

import { TYPOGRAPH_VARIANT } from "@/utils/styles";
import { HTMLAttributes, ReactElement, cloneElement } from "react";

interface LabelWithInputProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactElement;
  label: string;
}

export default function Input({ label, children, ...props }: LabelWithInputProps) {
  return (
//...
        <label htmlFor={label} className={`text-white ${TYPOGRAPH_VARIANT["medium"]}`}>
          {label}
        </label>
      {cloneElement(children, {
        id: label,
        ...children.props,
      })}
    </div>
  );
}

Input.Text = function InputText({ ...props }: HTMLAttributes<HTMLInputElement>) {
  return <input className="rounded-lg text-black px-2 py-[6px]" {...props} />;
};

              <Input label="아이디">
                <Input.Text />
              </Input>

이 경우 Input에 children으로 들어오는 요소에 해당 요소에 속성에 더해 id를 새로 부여할 수 있다.