[TS + React] defaultProps

defaultProps

1. 에러 발생

에러 발생

Property 'header' is missing in type '{}' but required in type 'HeaderProps'.

import React, { FC } from 'react';

import { WrapperPage } from '../../styles/pages';
import { StyledLink, WrapperLink } from './Header.styled';

type HeaderProps = {
	header: string;
};

const Header: FC<HeaderProps> = ({ header }) => {
	return (
		<WrapperLink as="header">
			<WrapperPage as="nav" justifyContent="center" alignItems="center">
				<StyledLink to="/">{header}</StyledLink>
			</WrapperPage>
		</WrapperLink>
	);
};

Header.defaultProps = {
	header: '북북 - BOOKBOOK',
};

export default Header;

2. ?를 통해 optional로 만들기

type HeaderProps = {
	header?: string;
};

3. Parital을 통해 optional로 만들기

type HeaderProps = {
	header: string;
};

const Header: FC<HeaderProps> & { defaultProps: Partial<HeaderProps> } = ({ header }) => {
	return (
		<WrapperLink as="header">
			<WrapperPage as="nav" justifyContent="center" alignItems="center">
				<StyledLink to="/">{header}</StyledLink>
			</WrapperPage>
		</WrapperLink>
	);
};

참고 SFC 타입 선언에 & { defaultProps: Partial } 에러 처리