기존 코드

: styled-components를 사용해서 같은 파일의 컴포넌트 아래에 스타일 코드를 작성했다.

import styled from "styled-components";
import Form from "../Form";

export const ShelterList = () => {
  return (
    <ListTable>
      <Form />
    </ListTable>
  );
};

const ListTable = styled.div`
  display: flex;
  align-self: center;
  width: 450px;
  height: 400px;
`;

바꾼 코드

: 파일이름.style.js라는 새로운 파일을 생성해서 스타일 관련 코드를 컴포넌트와 분리하고 import 해와서 사용하는 형식으로 변경했다. 이렇게 스타일 관련 코드를 분리하면 더 깔끔하게 관리할 수 있다.

파일 구조:
components>shelter>ShelterList.js
components>shelter>ShelterList.style.js

ShelterList.js

import * as S from "./ShelterList.style";
import Form from "../Form";

export const ShelterList = () => {
  return (
    <S.ListTable>
      <Form />
    </S.ListTable>
  );
};

ShelterList.style.js

import styled from "styled-components";

export const ListTable = styled.div`
  display: flex;
  align-self: center;
  width: 450px;
  height: 400px;
`;