React.FC

React.FC란 무엇인가?

React.FC는 React Function Component의 약자로, TypeScript에서 함수형 컴포넌트의 타입을 정의할 때 사용됩니다.

주로 props의 타입을 지정하고, children prop을 자동으로 포함하는 역할을 합니다.

함수형 컴포넌트를 작성할 때 타입을 명시적으로 정의하고, 코드의 안정성을 확보하는 데 매우 유용합니다.

 

import React from 'react';

const MyComponent: React.FC<{ name: string }> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

• 위 코드에서 MyComponent는 name이라는 props를 받고, 해당 props에 대한 타입은 React.FC<{ name: string }>로 정의됩니다.
• 여기서 React.FC는 props 타입을 받는 타입 별칭이자 제네릭 타입으로 동작합니다.
• children을 자동으로 포함하는 것도 큰 장점입니다.

 

타입 별칭(Type Alias) vs 제네릭 타입(Generic Type)

타입 별칭(Type Alias)

타입 별칭은 특정 타입에 이름을 붙여서 사용할 수 있도록 하는 방식입니다.

React.FC는 내부적으로 FunctionComponent라는 타입 별칭을 사용하고 있습니다.

이 타입 별칭을 사용하면, 컴포넌트의 props 타입을 보다 쉽게 정의할 수 있습니다.

 

예를 들어, 위 예시에서 React.FC 대신 FunctionComponent를 직접 사용할 수 있습니다

type MyComponentProps = {
    name: string;
};

const MyComponent: React.FunctionComponent<MyComponentProps> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

 

 

제네릭 타입(Generic Type)

제네릭 타입은 동적으로 타입을 전달하는 방식입니다.

React.FC는 제네릭 타입을 사용하여 props의 타입을 정의합니다.

제네릭 타입을 사용하면 타입을 더 세밀하게 정의할 수 있고, 다양한 상황에서 유연하게 사용할 수 있습니다.

const MyComponent = <P extends { name: string }>(props: P) => {
    return <div>Hello, {props.name}!</div>;
};

• 위 예시에서, P는 name: string 타입을 가진 객체로 제약되어 있으며, props는 동적으로 전달된 P 타입을 따릅니다.

 

---

React.FC와 제네릭 사용 비교

React.FC는 내부적으로 제네릭 타입으로 정의되어 있습니다.

즉, props 타입을 제네릭 타입 매개변수로 전달할 수 있습니다.

하지만 React.FC를 사용할 때의 장점과 단점을 함께 살펴보겠습니다.

장점

• 자동으로 children 포함 
  • React.FC를 사용하면 children prop이 자동으로 포함됩니다.
  • 이로 인해 children이 필요한 컴포넌트를 작성할 때 매우 편리합니다.
• 간결한 코드
  •  React.FC를 사용하면 컴포넌트의 타입을 간결하게 정의할 수 있습니다.

단점

• children이 필요 없는 경우에도 포함됨 
  • children이 필요 없는 컴포넌트에서 React.FC를 사용하면 불필요하게 children prop이 포함되어 코드가 불필요하게 복잡해질 수 있습니다.

 

제네릭 타입 사용 장점

제네릭을 사용하면 children을 자동으로 포함시키지 않거나, 필요한 경우 명시적으로 포함시킬 수 있어 더 유연하게 사용할 수 있습니다.

 

---

 

React.FC는 children을 자주 사용하는 컴포넌트에서 유용하게 사용할 수 있습니다.

그러나 children이 필요 없는 경우에는 제네릭을 사용하여 props를 더 명시적으로 정의하는 것이 좋습니다.

추천 사용법

• children이 필요한 경우: React.FC를 사용하여 children을 자동으로 포함시키는 것이 유리합니다.
• children이 필요 없는 경우: 제네릭을 사용하여 props 타입을 명시적으로 정의하는 것이 더 깔끔하고 효율적입니다.

 

React.FC를 사용한 카드 컴포넌트

React.FC를 사용하여, 다양한 내용을 받을 수 있는 카드 컴포넌트를 만들어 보겠습니다.

이 컴포넌트는 title과 children을 받아서, 동적으로 다양한 콘텐츠를 렌더링할 수 있습니다.

import React from 'react';

// 카드 컴포넌트 정의
const Card: React.FC<{ title: string }> = ({ title, children }) => {
    return (
        <div style={cardStyle}>
            <h2>{title}</h2>
            <div>{children}</div>
        </div>
    );
};

// 스타일을 적용한 카드 스타일
const cardStyle: React.CSSProperties = {
    border: '1px solid #ccc',
    padding: '16px',
    borderRadius: '8px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
    maxWidth: '300px',
    margin: '10px auto',
};

// 사용 예시
const App: React.FC = () => {
    return (
        <div>
            <Card title="카드 1">
                <p>이 카드에는 간단한 텍스트가 포함되어 있습니다.</p>
            </Card>
            <Card title="카드 2">
                <ul>
                    <li>리스트 아이템 1</li>
                    <li>리스트 아이템 2</li>
                    <li>리스트 아이템 3</li>
                </ul>
            </Card>
        </div>
    );
};

export default App;

• Card 컴포넌트가 title을 받고, children을 렌더링합니다.
• 이로 인해 카드 컴포넌트가 텍스트, 리스트, 이미지 등 다양한 콘텐츠를 유동적으로 받을 수 있습니다.

 

제네릭을 사용한 버튼 컴포넌트

React.FC 대신, 제네릭 타입을 사용하여 컴포넌트를 작성할 수 있습니다.

이 예시에서는 버튼 컴포넌트가 label과 onClick 이벤트를 받아서, 클릭 시 다른 동작을 하도록 만들어보겠습니다.

import React from 'react';

// 제네릭을 사용한 버튼 컴포넌트
const Button = <P extends { label: string; onClick: () => void }>(props: P) => {
    return (
        <button onClick={props.onClick} style={buttonStyle}>
            {props.label}
        </button>
    );
};

// 버튼 스타일
const buttonStyle: React.CSSProperties = {
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    padding: '10px 20px',
    borderRadius: '4px',
    cursor: 'pointer',
    fontSize: '16px',
};

// 사용 예시
const App: React.FC = () => {
    const handleClick = () => {
        alert('버튼 클릭됨!');
    };

    return (
        <div>
            <Button label="클릭하세요" onClick={handleClick} />
        </div>
    );
};

export default App;

• 이 예시에서는 버튼 컴포넌트를 제네릭으로 정의하고, label과 onClick을 prop으로 받아 사용합니다.
• 제네릭 타입을 사용하여 props를 명확히 정의하고, 버튼의 텍스트와 클릭 이벤트 핸들러를 동적으로 처리할 수 있게 했습니다.