React.ReactNode, ReactElement, ComponentProps, Ref

React.ReactNode

ReactNode는 React에서 렌더링할 수 있는 모든 요소를 포함하는 타입입니다.

문자열, 숫자, JSX 엘리먼트, null, undefined, 배열 등 다양한 값이 포함될 수 있습니다.

 

import React from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  return <div className="p-4 border rounded-md">{children}</div>;
};

// 사용 예시
const App = () => (
  <MyComponent>
    <h2>안녕하세요!</h2>
    <p>이 컴포넌트는 다양한 children을 받을 수 있습니다.</p>
  </MyComponent>
);

export default App;

• ReactNode를 사용하면 문자열, JSX 요소, 배열 등 다양한 형태의 children을 받을 수 있어 유연한 컴포넌트를 만들 수 있습니다.

---

React.ReactElement

ReactElement는 React 컴포넌트가 반환하는 구체적인 요소를 나타내는 타입입니다.

JSX에서 반환되는 값과 밀접하게 관련되어 있으며, 특정 컴포넌트의 타입을 지정할 때 유용합니다.

 

import React from "react";

interface MyComponentProps {
  element: React.ReactElement;
}

const MyComponent: React.FC<MyComponentProps> = ({ element }) => {
  return <div className="p-4 shadow-md">{element}</div>;
};

// 사용 예시
const App = () => (
  <MyComponent element={<button className="px-4 py-2 bg-blue-500 text-white rounded">클릭하세요</button>} />
);

export default App;

• ReactElement를 사용하면 특정 요소(React 컴포넌트)를 강제할 수 있어, props가 JSX 엘리먼트만 받도록 제한할 수 있습니다.

---

React.ComponentProps

ComponentProps<T>는 HTML 요소 또는 특정 React 컴포넌트의 props 타입을 가져오는 유틸리티 타입입니다.

이를 활용하면 기존 컴포넌트의 props 타입을 쉽게 재사용할 수 있습니다.

 

import React from "react";

type ButtonProps = React.ComponentProps<"button">;

const CustomButton: React.FC<ButtonProps> = (props) => {
  return <button {...props} className="px-4 py-2 bg-green-500 text-white rounded">{props.children}</button>;
};

// 사용 예시
const App = () => (
  <CustomButton onClick={() => alert("클릭됨!")}>클릭하세요</CustomButton>
);

export default App;

• ComponentProps<'button'>을 사용하면 button의 기본 속성(onClick, disabled 등)을 자동으로 상속받아 재사용성이 높아집니다.

---

React.Ref

React.Ref는 DOM 요소나 컴포넌트의 참조를 저장하는 데 사용됩니다.

useRef를 활용하면 특정 요소에 직접 접근할 수 있습니다.

 

import React, { useRef } from "react";

const InputFocus: React.FC = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);

  const handleFocus = () => {
    inputRef.current?.focus();
  };

  return (
    <div className="p-4 space-y-2">
      <input ref={inputRef} type="text" placeholder="이곳을 클릭해보세요" className="border px-2 py-1 rounded" />
      <button onClick={handleFocus} className="px-4 py-2 bg-blue-500 text-white rounded">
        포커스 이동
      </button>
    </div>
  );
};

export default InputFocus;

• useRef와 MutableRefObject를 사용하면 컴포넌트가 다시 렌더링될 때도 유지되는 값(예: DOM 요소)을 관리할 수 있습니다.