타입스크립트 : React.FC는 그만! children 타이핑 올바르게 하기

참고자료 :

https://stackoverflow.com/questions/65548388/react-propswithchildren-with-no-props-other-than-children

React.PropsWithChildren with no props other than `children`?

리액트에는 React.PropsWithChildren<T>타입이 있습니다.

우리의 Props의 타입에 children을 추가한 타입입니다.

interface WrapperProp {
 anyProp:any; // ...
}

function App(props: React.PropsWithChildren<WrapperProps>) {
  return <div>{props.children}...</div>;
}

또한 chiildren만 쓰고싶으면 아래와 같이 사용합니다.

const MyComponent = ({ children }: PropsWithChildren) => { /* ... */ }

2022년 6월 3일에 머지된 내용이라 @types/react 버전에 따라 안될 수도 있습니다.
아래 링크를 참고합니다.

https://stackoverflow.com/questions/65548388/react-propswithchildren-with-no-props-other-than-children#:~:text=making%20that%20the%20default%20for%20PropsWithChildren

React.PropsWithChildren with no props other than `children`?

만약 위가 안되면 이렇게 씁니다.

const MyComponent = ({ children }: PropsWithChildren<unknown>) => { /* ... */ }

왜 React.FC는 쓰지 말라고 한건가요?

아래 링크를 참조합니다. https://github.com/facebook/create-react-app/pull/8177

Remove React.FC from Typescript template by Retsam · Pull Request #8177 · facebook/create-react-app

• 제네릭을 지원하지 않습니다.
• children을 암시적으로 허용합니다. 리턴하는 부분에서 사용하지 않는 경우에도 쓸모없이 전달할 수 있습니다. (isp위반)
• 컴파운드 컴포넌트 패턴의 타이핑을 혼란스럽게 합니다. (없어도 됨에도 불구하고)
• Component.defaultProps과 사용하면 더욱 이상합니다.

2022.11.29 추가 : 아직도 React.FC를 쓰지 말라고?

이 글을 작성한 의도는 실무에서 몇몇 프로젝트를 경험하며 무지성으로 해당 타입을 복붙하는 분들을 자주 봐서,

의식없는 스택오버플로우 코드 복붙에 대한 경각심을 불러일으키기 위한 것이지 절대악이다! 이런 것은 아닙니다.

 

그리고 React 18부터 React.FC내의 암묵적 children 필드가 사라졌습니다.

https://blog.shiren.dev/2022-04-28/

리액트 18의 타입스크립트 타입 변경점

 

그래서 아직도 React.FC는 안쓰는 것을 추천하냐고요?

 

판단은 여러분의 몫입니다만, 저는 여전히 추천하지 않습니다.

타입스크립트의 멘탈 모델은 타입 추론을 최대한 활용하여 컴파일러에 최대한 타입과 관련한 작업을 위임하고,

사용자가 사용하는 타입을 단순화 하는 것입니다.

 

제네릭 타입은 일반적으로 복접도가 높으며, 타입을 장황하게 만듭니다.

React.FC의 경우 이 장황함이라는 정도가 그렇게 크지 않음은 인정합니다.

 

개인적으로 저는 아래 게시물들과 유사한 컨벤션을 선호하기에,

익명 함수를 이용해 컴포넌트를 만들 때 사용하는 FC 타입을 사용하지 않습니다.

 

https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript

How to write a React Component in TypeScript

https://kentcdodds.com/blog/function-forms

Function forms