[React] 리액트에서의 타입스크립트

JSX.Element

• 함수 컴포넌트의 타입
• 임의의 객체를 props로서 인수를 가지며 JSX.Element 타입의 값을 반환하는 함수가 됨
• children을 가질 때는 children의 타입은 React.ReactNode를 지정

// src/components/ContainerSample.jsx

// Container의 props 타입을 정의한다
type ContainerProps = {
    title: string
    children: React.ReactNode
};

const Container = (props: ContainerProps): JSX.Element => {
    const { title, children } = props;

    return (
        <div style={{ background: 'red' }}>
            <span>{title}</span>
            {/* props인 children을 삽입하면, 이 컴포넌트의 시작 태그와 종료 태글 감싼 요소를 표시한다. */}
            <div>{children}</div>
        </div>
    );
};

const Parent = (): JSX.Element => {
    return (
        // Container를 사용할 때, 다른 요소를 감싸서 사용한다.
        <Container title="Hello">
            <p>이 부분이 배경색으로 둘러싸여 있습니다.</p>
        </Container>
    );
};

export default Parent;

FC, VFC

리액트 18이전

• React.FC: children이 props 안에서 암묵적으로 정의
• React.VFC: children을 갖지 않음

리액트 18이후

• React.FC: children 삭제 → 모든 컴포넌트는 FC타입을 지정하고 children은 props 타입 안에서 지정
• React.VFC: 리액트 18부터는 권장하지 않음.

// src/components/ContainerSample.jsx

// React 18 이후의 컴포넌트에 대한 타입 지정 방법.
// VFC가 비추천되어 FC에서 암묵적인 children의 정의가 사라졌다.
type ContainerProps = {
    title: string
    children: React.ReactNode
}

const Container: React.FC<ContainerProps> = (props) => {
    const { title, children } = props;

    return (
        <div style={{ background: 'red' }}>
            <span>{title}</span>
            <div>{children}</div>
        </div>
    );
};

하지만 FC도 다음과 같은 이유로 잘 사용되지 않는 경향이 있음

• FC에서 암묵적을 정의된 displayName이나 defaultProps는 최근 사용되지 않거나, 권장되지 않음
• props의 타입 정의에 제네릭을 사용하는 경우, FC에 적합한 타입을 지정할 수 없다.

현재는 props에 타입을 명시하는 방법을 사용

const Container = (props: ContainerProps) => { //...