[React] Error: Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'.

TypeScript를 사용하는 React에서 JSX 표현식 오류가 발생했습니다.

* 에러가 발생한 코드

 

const color = "blue";
const greeting = "Hello, React!";
return (
    <Fragment>
        <p style="color:{color}">{greeting}</p>
    </Fragment>
);

 

* 발생한 에러

 

ERROR in src/App.tsx:10:10
TS2559: Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'.
     8 |   return (
     9 |     <Fragment>
  > 10 |       <p style="color:{color}">{name}</p>
       |          ^^^^^

 

TypeScript는 익숙하지 않아서 에러 메세지를 보고서도 원인을 찾는데 좀 버벅였네요. TypeScript에서 style 속성은 객체를 받는데, 문자열(string)을 넣었기 때문에 발생한 에러였습니다. 아래처럼 문자열이 아니라 객체를 생성해서 넣어주면 해결 됩니다.

 

const color = {color:"blue"};
const greeting = "Hello, React!";
return (
    <Fragment>>
        <p style={color}>{greeting}</p>
    </Fragment>
);

 

여러가지 해보느라 inline style을 사용해 보았는데, 역시 자바스크립트 코드내에 스타일이 있으면 확장성도 떨어지고, 유지 보수도 힘들어 지겠죠. inline style은 사용하지 않는게 좋을것 같습니다.