[ts] { children: (string | Element)[]; }' 유형에 'IntrinsicAttributes' 유형과 공통적인 속성이 없습니다.

error 

 

 

 

{ children: (string | Element)[]; }' 유형에 'IntrinsicAttributes' 유형과 공통적인 속성이 없습니다.

 

해석

 

children: 이 객체의 children 이라는 속성을 나타낸다. 

(string | Element)[] : children 속성의 타입을 설명한다. 

- string: 자식으로 문자열을 허용한다는 의미 

- Element: 자식으로 DOM요소 또는 React 컴포넌트를 허용한다는 의미  

- [] : 배열을 의미. 즉, children은 문자열 또는 DOM 요소로 이루어진 배열이란 뜻. 

 

 

IntrinsicAttributes:  ts에서 모든 react 컴포넌트에 적용되는 기본 속성이다. 그 중 하나는 children이다. 

 

 

에러 발생 코드 

아래와 같이 Layout 컴포넌트로, 전체 프로젝트를 감싸려고 하는 때에 에러가 발생했다. 

 

Layout 컴포넌트는 아래와 같다. 

 

 

 

에러 발생 이유 

간단하게 말하자면, 

Layout 컴포넌트가 children을 감싸고 있는데, 

이에 대한 type이 정의되지 않아서이다. 

 

일반적으로 React 컴포넌트에서 children 타입은 단일 요소일 수도 있고, 배열일 수도 있다. 

React에서 children을 다룰 때는 더 일반적인 ReactNode 타입을 사용해야 한다. 

 

ReactNode는 더 포괄적이며, 문자열, 숫자, jsx 요소, null, undefined 등 다양한 타입을 허용한다. 

 

문제 해결 코드