[React] Typescript 사용시 children prop 관련 에러

Binding element 'children' implicitly has an 'any' type.

 React로 크롬 시작페이지를 만들다가 위와 같은에러가 떠 당황했습니다. 컴포넌트를 만들다보면 children prop을 불러오는 일은 비일비재한데 이 에러가 해결이 되지 않으면 꽤나 골머리가 아플 것 같았기 때문입니다.

 

 구글링을 조금만 해보니 저와 같은 에러가 뜬 사람들이 꽤 많은 것 같습니다 ㅎㅎ.

https://stackoverflow.com/questions/55370851/how-to-fix-binding-element-children-implicitly-has-an-any-type-ts7031

How to fix Binding element 'children' implicitly has an 'any' type.ts(7031)?

 스택오버플로우를 참고해서 에러를 해결해보니 바로 해결이 됐습니다!

 

• 기존 코드

• import React from "react";
  import styled from "styled-components";
  
  function Button({ children }) {
    return <StyledButton>{children}</StyledButton>;
  };
  
  export default Button;
  
  const StyledButton = styled.button``;

• 고친 코드

• import React, { FC } from "react";
  import styled from "styled-components";
  
  interface Props {}
  
  const Button: FC<Props> = ({ children }) => {
    return <StyledButton>{children}</StyledButton>;
  };
  
  export default Button;
  
  const StyledButton = styled.button``;