React.FC 사용 여부

[jindonyy]

앞에 defeault value 논의에서도 다뤘던 주제인데요.
투표와 함께 의견 남겨주시면 좋을거 같아요!

장점

1. propTypes, contextTypes, defaultProps, displayName이 자동완성 된다.
   FC 타입의 내부 코드

type FC<P = {}> = FunctionComponent<P>

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null
  propTypes?: WeakValidationMap<P> | undefined
  contextTypes?: ValidationMap<any> | undefined
  defaultProps?: Partial<P> | undefined
  displayName?: string | undefined
}

2. children이 props 에 기본적으로 children 이 들어가있다. (장점이자 단점) -> v.18에서 개선
3. 추가) return type 명시 됨 ( component 는 undefined 를 허용하지 않음 )

단점

1. 제네릭을 지원하지 않는다.
2. children이 props 에 기본적으로 children 이 들어가있다. (장점이자 단점) -> v.18에서 개선
3. 컴파운드 컴포넌트 패턴의 타이핑을 혼란스럽게 합니다.
4. Component.defaultProps 와 사용하면 이상하다. 혹은 지원하지 않는다. -> default parameter 사용하면 된다.
5. 훅이 나오기 이전 함수형 컴포넌트는 SFC 타입이었다. SFC에서 FC로 바뀐거처럼 훗날 FC가 무엇으로 바뀔 수 있다. 떄문에 단순히 props에 타입을 지정해주는 것이 이후에 함수의 타입이 바뀌더라도 안전하게 처리할 수 있다.

제가 생각하기엔 장점보다 단점이 더 큰거 같아요. 일일히 FC와 propsWithChildren 타입을 지정해줘야하고, 하위 컴포넌트를 추가할 때 Object.assign을 써줘야하는 번거로움이 있는데 감수하며 써야하는건가 싶어요.
장점을 계속 찾아봤지만 더 찾지못했습니다ㅠㅠ 여러분들이 생각하는 장단점이 더 있으면 말씀해주세요!
@hemudi @healtheloper @mina-gwak

[healtheloper]

장단점을 잘 정리했다고 생각이 드는 PR 링크 첨부합니다.
장점에서 쓰지 않아도 될 이유를 소거해볼게요

1. 다 안씀
2. PropsWithChildren 에서 변경됨
3. 장점 컴포넌트의 반환 타입을 undefined 로 하지 않는 것을 생각하면 될텐데, ts 상으로 한번 걸러질 것이라 생각되네요

No !

[hemudi]

와! 파크께서 공유해주신 글 너무 정리가 잘 되어있네요! 공유해주셔서 감사합니다!
쭉 읽어보니 단점들로 인한 타입 관리의 번거로움을 감수할 만큼 장점들이 매력적이지 않네요.
그래서 두 분의 의견에 동의하며 No에 투표했습니다!

No! ^_^)x

[healtheloper]

인원이 다 투표해도 어떤 확인할 수 있는 사항이 없는 것 같아서 DONE 이라는 라벨을 만들었습니다.
마지막으로 투표하시는 분이 라벨 달아주시면 확인이 수월할 것 같아요~

[hemudi]

댑악 넘 좋은 아이디어네요!
그런데 혹시 투표 글 뿐 아니라 논의가 다 끝난, 결론이 난 글에 사용하는 것도 괜찮을까요? ㅎoㅎ)?

[healtheloper]

좋습니당 ~

[mina-gwak]

React.FC를 사용하지 않는 쪽으로 결론이 났는데, 그럼 기존에 하던 것처럼 props에 타입을 지정해주는 식으로 작성하면 될까요?

type ComponentProps = { ... };

const Component = ({ ... }: ComponentProps) => { ... }; 

[hemudi]

그러면 될 것 같아요!
저도 이 방식으로 갈아 엎었습니다! ^_^)b

+) 아 그리고 저도 여쭤보고 싶은게,
React.FC를 사용하지 않으니까 "Headless 컴포넌트의 하위 컴포넌트 타입 지정 방식" 이 논의에 대한 결론도 하위 컴포넌트의 타입은 신경 안쓰고 기존 방식대로 구현해도 괜찮을까요? Object.assign 사용하지 않구요!

Component.A= A;
Component.B = B;
Component.C = C;

export default Component; 

[jindonyy]

FC 타입과 함께 쓰기 위해 생각한 방식이니 안써도 될거 같아여!