Search
🚨

(컴파운드 패턴) 자식 컴포넌트를 속성으로 추가할 때의 에러

에러 내용

Property 'PlusButton' does not exist on type 'FC<IOpsFormProps>

코드

compound pattern으로 만들 컴포넌트의 부모 역할을 하는 OpsForm을 React.FC로 정의
해당 컴포넌트에 자식 컴포넌트를 속성으로 추가 시도
import { FC } from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil'; import { PlusButton } from './Plus'; interface IOpsFormProps { children?: React.ReactNode; } const numberState = atom({ key: 'numberState', default: 0, }); const OpsForm: FC<IOpsFormProps> = ({ children }) => { const [number, setNumber] = useRecoilState(numberState); return ( <RecoilRoot> <div>{children}</div> </RecoilRoot> ); }; OpsForm.PlusButton = PlusButton; export default OpsForm;
TypeScript
복사

해결책

OpsForm 컴포넌트에 추가 속성을 정의할 수 있는 방법으로 구조를 변경
OpsFormFC<IOpsFormProps> 타입의 일반 함수 대신, 이를 속성으로 가질 수 있는 객체로 정의
const OpsForm = ({ children }: IOpsFormProps) => {
TypeScript
복사

깨달은 점

항상 컴포넌트 작성 시 습관적으로 React.FC로 작성하였는데 일부 제한점이 있다는 것을 알게 되었다.
자바스크립트에서 함수도 객체라는 것을 체감할 수 있었다!