오늘의 에러

import styled from 'styled-components';

const Table = (props) => {
  const Btn = styled.button`
    margin-left: 500px;
    width: 10%;
  `;
  return (
  	<>
    	<Btn
    </>
  );
};

export default Table;

컴포넌트 코드를 작성하던 중에 콘솔창에

The component styled.button with the id of "sc-bczRLJ" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

라는 메세지가 발생하였습니다.

그래서 어떤 이유때문에 이런 메세지가 발생하나 찾아보니

Styled Component 사용시에 태그를 함수 컴포넌트 안쪽에 선언한 경우 메세지가 출력된다고 합니다.

해결방법은 컴포넌트 안쪽에 선언한 태그를 바깥쪽으로 옮겨주는 것

import styled from 'styled-components';

const Table = (props) => {

  return (
  	<>
    	<Btn
    </>
  );
};

  const Btn = styled.button`
    margin-left: 500px;
    width: 10%;
  `;

export default Table;

코드를 이런식으로 변경해주니 메세지가 발생하지 않는 것을 확인할 수 있엇습니다.