원문 : https://isamatov.com/react-typescript-children-prop/
Using React children prop with TypeScript
I'll cover each of the types used for children prop and discuss the trade-offs so you can pick the right one for your use case.
isamatov.com
추가 : PropsWithChildren<T>라는 리액트 자체제공 타입이 있습니다. 이걸 활용합시다.
https://itchallenger.tistory.com/641
타입스크립트 : React.FC는 그만! children 타이핑 올바르게 하기
참고자료 : https://stackoverflow.com/questions/65548388/react-propswithchildren-with-no-props-other-than-children ) {} React.PropsWithChildren requires an argument. If I do React.PropsWithChil..." d..
itchallenger.tistory.com
JSX.Element
가장 제한적인 유형으로 단일 React Element에만 사용가능.
문자열 같은 primitive 사용 불가.
React.ReactChild
primitive를 허용하지만, 배열을 허용하지 않음.
children: ReactChild | ReactChild[] 과 같은 방법은? 단일 요소와 배열을 섞는걸 허용하지 않음.
ReactNode
React elements, primitives, portals, fragments 모든것을 받아들임
React.FC
함수형 컴포넌트에 적용 가능하며, children을 ReactNode로 암묵적으로 수용한다.
undefined로 들어올수도 있어 안쓰려는 사람들도 많다. (https://velog.io/@namezin/Why-I-dont-use-React.FC)
Conclusion
children을 특별히 제한할 이유가 없는 경우, prop에 ReactNode를 사용.
React.FC를 사용할 수 도 있음
'FrontEnd' 카테고리의 다른 글
| 리액트 디자인패턴 : Prop Collections and Getters (프롭 컬렉션 엔 게터 패턴) (0) | 2022.06.01 |
|---|---|
| 리액트 디자인패턴 : Compound Components (컴파운드 컴포넌트 패턴) (0) | 2022.06.01 |
| 리액트 디자인패턴 : Context Module Function (컨텍스트 모듈 함수 패턴) (0) | 2022.06.01 |
| 타입스크립트의 타입 추론과 힌들리 밀러 타입 시스템 (2) | 2022.05.26 |
| Recoil로 Excel(SpreadSheet) 만들기 (1) | 2022.05.22 |
