styled-components 사용에 대해서

현재는 가장 기본적인 형태로 co-locating하게 하나의 컴포넌트 파일 안에서 관리하고있는데 의문점이 생겼다.

• 컴포넌트 단위로 파일을 한번에 관리하면 좀 더 편하고, 재사용성을 높인다는 이점에 집중하여 styled-components를 사용하게 되었다.

• 하나의 파일에 관리하며 CSS에 친화적이고, JSX를 좀 더 순수하게 유지할 수 있다는 이점도 존재했다.

• html css js 로 구성하던 구조에 친숙한 형태로 관리할 수 있었다.

• 작은 파일들은 관리하기가 확실히 수월하지만 코드 길이가 길어지면 그만큼 이점을 챙기기 어려워 진다는 걸 느끼게 되었다.

• co-locating의 이점을 유지하면서 코드를 style, 실제 component 파일을 분리하기 위해 한 폴더에서 관리하게 됐다.

- Item/
--- index.js // 실제 Item 컴포넌트
--- styles.js // style 관리

• 선언한 styles에서 객체로 import해서 사용하면 되겠당

import * as S from './styles';

const Content = ({ title, children }) => {
  return (
    <section>
      <S.Item>{title}</S.Item>

      <span>{children}</span>
    </section>
  );
};

• 컴포넌트니까 당연히 PascalCase로 하고 사전에 정해놓은 네이밍 컨벤션에 맞게..!

• styled-comopnents를 사용하는 방법은 많을거라고 생각하고 팀에 맞게 적용하는게 좋겠다.

• 어떻게 관리할지 팀의 목적에 맞는 방법을 채택하여 한가지 마인드셋으로 코딩을 시작한다면 분명 향상된 코드를 만들어낼 것이다!