TIL 31. React - Styled Component 사용 중 오류.

Styled Component를 사용하던 중, 아래와 같은 오류를 만났다.

The component styled.div with the id of "sc-gKPRtg" 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는 컴포넌트 함수 안에 사용되면 안되기 때문에 뜨는 오류다.

import styled from 'styled-components';

const ListStyle = styled.div`
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  height: 300px;
  overflow: scroll;
  `;

function List() {
  
  // 이 부분에 있으면 오류가 난다.------------
    // const ListStyle = styled.div`
    // display: grid;
    // gap: 20px;
    // grid-template-columns: repeat(3, 1fr);
    // height: 300px;
    // overflow: scroll;
    // `;
  //-----------------------------------
  
  const globalTodo = useSelector((state) => state.todoReducer.todos);
  return (
      	<ListStyle>
    		<div>여긴 리스트</div>
    	</ListStyle>
  
  );
}

export default List;

안쪽에 있으면 안되기 때문에 밖으로 옮겨줬다.