[React.js] Styled Components 파일 분리 멘토 코드 리뷰

Styled Components

• 스타일드 컴포넌트를 프로젝트에서 사용하면서, 도대체 어떻게 써야 잘 쓰는건지 감을 못잡고 있었습니다.
• 그러던 중 동기 분이 이전 기수들 코드를 통해 파일분리를 하고, 쉽게 사용하는 방법을 알려줬습니다.
• 하지만 코드리뷰를 통해 조금 더 컨벤션에 가까운 best practies를 알게 되었고, 해당 리뷰를 반영하게 되었습니다.
• 멘토님의 깃헙 프로필을 까는게 개인정보 보호상 안좋다고 생각하여 프로필부분은 날렸습니다.

• 개인적으로 위 세가지 링크가 정말 도움이 많이 되어 포스팅으로 남깁니다.

1. Styled Components Best Practices
2. The 3 essentials to get started with styled-components
3. default export와 named export 차이점

그 결과 나온 팀 컨벤션

1. 파일 분리

   • ResumeForm.js 라는 컴포넌트 js 파일이 있다면,
   • ResumeForm.Styled.js 라는 Styled.js 파일을 생성하여 Styled Component 코드를 분리한다.

2. export / import 방법 : named export / import

// @ ResumeForm.js
import * as S from './ResumeForm.Styled.js';

return <S.ResumeForm / >

// @ ResumeForm.Styled.js
export const ResumeForm = styled.div`
${({ theme }) => theme.variables.flex('column')}
padding: 1rem 3rem;
`;