[Next,React] PropsWithChildren, PropWithoutRef

목차

 

 

 PropWithoutRef

주요 개념 및 사용 예시

 1. 기본 개념

'PropsWithoutRef'는 제네릭 타입으로, 주어진 'props' 타입에서 'ref'속성을 제거한다. 이는 주로 고차 컴포넌트(HOC) 또는 전달 컴포넌트 (forwarding components)에서 사용된다.

 

 2. 사용 예시

a. 기본 사용 예시

import React, { PropsWithoutRef, forwardRef, Ref } from 'react';

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent = forwardRef<HTMLDivElement, PropsWithoutRef<MyComponentProps>>(
  (props, ref) => {
    return (
      <div ref={ref}>
        <p>Name: {props.name}</p>
        <p>Age: {props.age}</p>
      </div>
    );
  }
);

export default MyComponent;

 

b. 고차 컴포넌트 (HOC)와 함께 사용

고차 컴포넌트(HOC)를 만들 때도 'PropsWithoutRef'를 사용할 수 있다. 예를들어 'withLogging'이라는 HOC를 만들때이다.

import React, { ComponentType, PropsWithoutRef, RefAttributes } from 'react';

function withLogging<P>(
  WrappedComponent: ComponentType<P>
) {
  const ComponentWithLogging = (
    props: PropsWithoutRef<P> & RefAttributes<any>
  ) => {
    console.log('Rendering with props:', props);

    return <WrappedComponent {...props as P} />;
  };

  return ComponentWithLogging;
}

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
};

const MyComponentWithLogging = withLogging(MyComponent);

export default MyComponentWithLogging;

 

요약

PropsWithoutRef는 TypeScript를 사용하여 React컴포넌트를 작성할 때, 'props'타입에서 'ref'속성을 제외하는 유틸리티 타입이다. 주로 'forwaredRef'를 사용할 때나 고차 컴포넌트(HOC)를 만들 때 유용하게 사용된다. 이를 통해 'props' 타입을 보다 명확하고 안전하게 정의할 수 있다.

 

 PropsWithChildren

'PropsWithChildren'는 기본적으로 컴포넌트에 'children' 속성을 추가하는 역할을 한다. React 컴포넌트가 자식 요소를 받을 수 있도록 하기 위해 사용된다.

예시

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<React.PropsWithChildren<MyComponentProps>> = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      {props.children}
    </div>
  );
};

// 사용 예시
<MyComponent name="John Doe">
  <p>This is a child element.</p>
</MyComponent>

위의 예시에서 'MyComponent'는 'name'이라는 prop 과 함께 'children'을 받을 수 있다.

 

'PropsWithChildren'을 사용하는 이유

 

• 타입 안전성: PropsWithChildren를 사용하면 TypeScript가 컴포넌트의 children을 자동으로 인식하여 타입 검사를 할 수 있습니다.
• 명확한 의도: 컴포넌트가 자식 요소를 받을 수 있다는 의도를 명확하게 나타냅니다.
• 유연성: children prop을 명시적으로 포함함으로써, 컴포넌트를 더 유연하게 사용할 수 있습니다.

요약

 

• PropsWithChildren는 컴포넌트가 자식 요소를 받을 수 있도록 타입을 정의할 때 사용됩니다.
• forwardRef와는 별개의 용도로, 주로 컴포넌트가 children을 받을 수 있게 하는 데 사용됩니다.
• React.FC와 함께 사용하면 children 속성을 명시적으로 포함하여 타입 안전성과 명확성을 높일 수 있습니다.