[react] 하위 Component에서 children 을 지정하지 않아 에러가 나는 경우-TS2322: Type '{ children: never[];...

typescript를 쓰면서 다양한 에러를 보게되는데 이번엔 하위컴포넌트에 데이터를 전달하다가 생기는 오류가 있었다. 메세지는 다음과 같다.

 

TS2322: Type '{ children: never[]; key: string; category: Category; }' is not assignable to type 'IntrinsicAttributes & ParamProps'. Property 'children' does not exist on type 'IntrinsicAttributes & ParamProps'.

 

해당 코드는 아래와 같다.

interface Category {
  id: string;
  name: string;
  algorithms: Algorithm[];
}

interface Algorithm {
  id: string;
  name: string;
}

const SolveCategory = () => {
  const [categories, setCategories] = useState<Category[]>(defaultCategories);

...
  return (
...
        <Grid
          container
          justify={"center"}>
          {categories.length === 1
            ? ""
            :
            <Grid item xs={12}>
              {categories.map(category => (
                  <SolveCategoryList
                      key={category.id}
                      category={category}>
                  </SolveCategoryList>
              ))}
            </Grid>
          }
        </Grid>
...
  ) 

 

아래는 하위 컴포넌트인 SolveCategoryList.tsx 의 부분내용이다

interface IParamProps {
  children: ReactNode;
  category: ICategory;
}

interface ICategory {
  id: string;
  name: string;
  algorithms: IAlgorithm[];
}

interface IAlgorithm {
  id: string;
  name: string;
}

export const SolveCategoryList = ({category}: IParamProps) => {
...
  return (
    <Box key={category.id}
         className={classes.marginBottom10}>

      {category.algorithms.length == 0
          ?
          <Accordion disabled>
            <AccordionSummary
                expandIcon={<ExpandMoreIcon/>}
                aria-controls="panel1a-content"
                id="panel1a-header">
...

에러 스샷

이런에러가 나는 이유는 StatelessComponent 의 문제인데, 문구의 내용대로 children을 추가하면 에러가 발생하지 않았다.

 

빨간줄이 사라짐.

SolveCategoryList.tsx

interface ParamProps {
  children: ReactNode;
  category: Category;
}

...
export const SolveCategoryList = ({children, category}: ParamProps) => {
...

 

사실 이 children은 태그 내 텍스트를 썼을때 들어오는 것이다. 예를들어 다음과 같이 하는게 그렇다.

 

SolveCategory.tsx

...
            <Grid item xs={12}>
              {categories.map(category => (
                  <SolveCategoryList
                      key={category.id}
                      category={category}>
                    하이
                  </SolveCategoryList>
              ))}
            </Grid>
..

SolveCategoryList.tsx

...
export const SolveCategoryList = ({children, category}: IParamProps) => {
  console.log("children: ", children)
...

children 결과

 

그런데 내 경우 태그내에 정보를 쓸 것이 없기 때문에 이것이 불필요했다. 그래서 살펴보니 다음의 방법으로 해결이 가능했다.

변경전:
export const SolveCategoryList = ({children, category}: IParamProps) => {

변경후:
export const SolveCategoryList: React.FunctionComponent<IParamProps> = ({category}) => {

이전에 React.SFC 를 써서 해당 컴포넌트가 StatelessComponent임을 지정했는데, 해당 명령어가 deprecated 되었다. 그래서 안을 들여다보니 FunctionComponent를 쓰라고 명시되어 있었다.

그래서 React.FunctionComponent로 변경하니 에러가 모두 사라졌다.

 

 

 

끝.