리액트와 타입스크립트를 사용할 때 FC와 VFC가 타입으로 쓰인다.
VFC가 나오기 이전에 FC를 사용하는 걸 피해야 했던 이유는 크게 두가지가 있었다.
- FC가 props로 children을 옵셔널로 포함하고 있기 때문에 children이 필요하지 않은 컴포넌트에 children을 전달하는 경우 어떠한 오류도 발생하지 않는다. (엄격함을 지향하는 typescript와 모순되는 것처럼 보인다.)
- 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
Adds a type VoidFunctionComponent with VFC alias that is the same as the FunctionComponent (FC) type, except that it does not accept a children prop. cf. #40993 Use a meaningful title for the pul...
github.com
결국 FC와 VFC 둘 다 바뀌게 될 예정이지만, 개인적으로 이 예정된 업데이트는 마음에 든다.
children이 옵셔널로 감춰져 있는 FC는 명시하는 걸 좋아하는 타입스크립트와 뭔가 맞지 않는 느낌인지라..
그래도 지금 막 FC랑 VFC로 열심히 코드 짜고 계신 분들은 좀 머리가 아플수도
'React' 카테고리의 다른 글
| [React] 리액트 초기 환경 세팅하기 (0) | 2022.07.12 |
|---|---|
| [React] 왜 key는 list에서만 필요할까? 왜 index를 key로 사용하면 안되는 걸까? (0) | 2022.05.01 |
| [React] 함수형 컴포넌트에서 defaultProps와 default parameters 중 무엇을 사용해야 할까? (0) | 2022.04.03 |
| [React] props에 객체를 전달하면: pass by reference (0) | 2022.02.24 |
| [React] 리액트 디자인 패턴에 대한 고찰 (0) | 2022.02.22 |