React.FC 대신 PropsWithChildren을 사용해야 하는 이유

React.FC의 문제점

props에는 두 종류가 있다.

• 명시적 props: props 타입에 명시적으로 작성되어 있는 props
• 암시적 props:@types/react등에 의해 자동적으로 추가되는 props

React.FC의 props는 기본적으로 children을 포함한다. 즉, React.FC를 사용할 경우 children이 암시적 props가 된다.

 

excess props: 컴포넌트에 넘겨지지만 컴포넌트에서 사용되지 않는 props

→ excess props의 존재는 POLA원칙을 어기게 만든다.

POLA: Principle of Least Astonishment 컴포넌트는 사용자가 예상한대로 작동해야 한다는 원칙

 

암시적 props인 children은 excess props에 해당한다. 사용자 모르게 컴포넌트의 props로 넘겨지기 때문에, 컴포넌트의 예측 불가능한 동작을 야기할 수 있다.

// 예시
const App: React.FC = () => { /*... */ };
const Example = () => {
	<App><div>Unwanted children</div></App>
}

따라서 children prop을 명시해주는 것이 바람직하다.

 

해결방안

React.PropsWithChildren<T>을 사용한다.

type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

내가 넘긴 props 타입에 children을 추가한 타입을 리턴한다. 이를 통해 children 을 명시적 props로 넘겨줄 수 있다.

 

사용방법

// 사용방법1: 내가 정의한 props 타입과 함께 사용하고 싶은 경우

interface MyProp {
	foo: any;
}

function App(props: React.PropsWithChild<MyProp>) {
	return <div>{props.children}</div>
}

// 사용방법2: children prop만 사용하고 싶은 경우

function App({children}: React.PropsWithChildren) => {
	...
}