[React] React.FC, React.VFC를 쓰면 안되는 이유

리액트와 타입스크립트를 사용할 때 FC와 VFC가 타입으로 쓰인다.

 

VFC가 나오기 이전에 FC를 사용하는 걸 피해야 했던 이유는 크게 두가지가 있었다.

 

1. FC가 props로 children을 옵셔널로 포함하고 있기 때문에 children이 필요하지 않은 컴포넌트에 children을 전달하는 경우 어떠한 오류도 발생하지 않는다. (엄격함을 지향하는 typescript와 모순되는 것처럼 보인다.)
2. FC와 defaultProps를 동시에 사용하는 경우 제대로 작동하지 않음

 

근데 children을 없앤 VFC가 나오고, defaultProps가 deprecated 되면서(이전 글 참고) 위의 두 문제는 해결되는 것처럼 보였다.

 

왜 처럼이냐면 VFC 역시 사라지게 될(deprecated) 운명이기 때문..

 

정확히는 FC가 사라지고, VFC의 기능이 그대로 FC로 이름만 바뀔 것으로 보인다. (아래참고)

 

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643#issuecomment-801487166

[@types/react] add VoidFunctionComponent type which does not accept "children" by awmottaz · Pull Request #46643 · DefinitelyT

 

결국 FC와 VFC 둘 다 바뀌게 될 예정이지만, 개인적으로 이 예정된 업데이트는 마음에 든다.

 

children이 옵셔널로 감춰져 있는 FC는 명시하는 걸 좋아하는 타입스크립트와 뭔가 맞지 않는 느낌인지라..

 

그래도 지금 막 FC랑 VFC로 열심히 코드 짜고 계신 분들은 좀 머리가 아플수도