styled-components를 적용하려면

참고 하겠습니다.

참고할게요

항상 빠른 답변 감사합니다~! 

안녕하세요, 정상구님. 소플입니다.

styled-components를 통해 만들어진 컴포넌트는 이름 그대로 '스타일이 입혀진 컴포넌트'가 됩니다.

웹사이트를 개발하다보면 일반적인 컴포넌트의 경우에도 스타일을 필수적으로 입히게 되는데,

아래와 같이 직접 컴포넌트에 style 속성을 넣어주거나,

<Greeting style={{ background: "red" }} />

또는 별도의 CSS파일을 만들어 놓고, className속성을 사용해서 넣어줄 수 있습니다.

.red-background {
    background: red;
}

<Greeting className="red-background" />

하지만 styled-components는 애초에 스타일이 입혀진 상태로 컴포넌트를 생성해주기 때문에,

실제 컴포넌트의 코드가 조금 더 간결해진다는 장점이 있습니다.

그리고 컴포넌트의 이름이 곧바로 들어가기 때문에 가독성이 올라간다는 장점도 있습니다.

const StyledGreeting = styled(Greeting)`
    background: red;
`;

<StyledGreeting />

어차피 스타일을 입히는 작업은 필요한데, 그 때 어떤 방식을 사용할지는 개발자에게 달려있습니다.

styled-components가 정답은 아니며, CSS, SCSS, Tailwind 등 여러가지 방법을 사용해서 스타일을 입혀보면서 장단점을 파악하시면 더 도움이 되실것 같습니다.

감사합니다.