[TS] Typescript 오류 해결 : is not assignable to type 'IntrinsicAttributes && boolean'

오류 

이런 빨간 밑줄이 뜨면서...

 is not assignable to type 'IntrinsicAttributes && boolean' 이 뜬다..

무작정 저 위의 에러 내용을 구글링 해봤지만 잘 나오지 않고 나와도 나와 비슷한 유형으로 에러가 뜨는 경우가 없었다.

 

해결 방법

무작정 구글링하기보다는 근본적인 문제점이 뭔지 파고들었다.

난 왜 에러가 나오게 코딩했을까? 바로 typescript로 react props의 타입을 설정하는 방법을 몰라서였다. (바보구나..)

'typescript react props' 을 구글링을 했고 내 에러를 해결할 수 있었다.

 

(내가 생각한 TS로 react props 설정했을 때의 코드)

import React from 'react';

const Greetings = ({ name: string, mark :string}) => (
  <div>
    Hello, {name} {mark}
  </div>
);

(올바르게 TS로 react props 설정했을 때의 코드)

import React from 'react';

type GreetingsProps = {
  name: string;
  mark: string;
};

const Greetings = ({ name, mark }: GreetingsProps) => (
  <div>
    Hello, {name} {mark}
  </div>
);

 

아하! 따로 타입을 선언해서 사용하면 된다는 사실을 알게 되었다!!

그래서 이 점을 참고하여 고쳐봤다.

깔끔하게 빨간 밑줄이 사라진 것을 확인할 수 있다!