에러 내용
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 컴포넌트에 추가 속성을 정의할 수 있는 방법으로 구조를 변경
•
OpsForm을 FC<IOpsFormProps> 타입의 일반 함수 대신, 이를 속성으로 가질 수 있는 객체로 정의
const OpsForm = ({ children }: IOpsFormProps) => {
TypeScript
복사
깨달은 점
•
항상 컴포넌트 작성 시 습관적으로 React.FC로 작성하였는데 일부 제한점이 있다는 것을 알게 되었다.
•
자바스크립트에서 함수도 객체라는 것을 체감할 수 있었다!
