UI에 대한 질문이 있습니다

선생님 안녕하세요, 강의 항상 잘 듣고 있습니다.

다름이 아니라 UI에 관련된 질문을 드리고자 합니다.

Redux 관련 질문이 아닌 질문이라 먼저 양해의 말씀 드립니다 ㅜㅜ

지난 React 강의에서도, 이번 강의에서도 궁금했던 점이라..

내용은 아래와 같습니다

보통 컴포넌트를 작성할 때 Wrapper 태그를 만들어 한번 감싸주는데,스타일 목적 외에 Wrapper로 감싸주는 것이 일종의 컨벤션인지 궁금합니다.
예를들어 스타일을 줄 목적이 없다면 굳이 Wrapper로 감싸주지 않아도 되는지 여쭤보고 싶습니다.
현업에서 styled-components를 사용할 때, 모든 스타일을 styled-components로 작성하는지 궁금합니다.
일단 드는 생각으로는 styled-components로는 해당 컴포넌트의 기본적인 스타일을 지정하고,
세부적인 부분이나 반응형 스타일을 index.css 등에서 작성할 것 같다는 생각이 들긴 하는데..
어떨지 궁금해서 여줘봅니다 ㅜㅜ
만약 styled-components와 index.css 등으로 스타일을 나눠 작성한다면 특정한 기준이 있을까요?

감사합니다.

안녕하세요, 소플입니다.

질문해주신 내용에 대해 답변드립니다.

Wrapper 컴포넌트로 감싸는 것이 필수적인지?

먼저 제가 작성하는 실습 코드에서는 대부분 컴포넌트의 최상위에서 Wrapper라는 이름의 컴포넌트로 감싸주고 있습니다. 이것은 별도로 정해진 규칙이나 컨벤션은 아니며 제가 컴포넌트를 작성하는 개인적인 습관 정도로 생각하시면 됩니다.

Wrapper가 아닌 RootContainer, Container 등의 다른 이름을 사용하셔도 무방하며, 이것은 그룹이나 회사에 따라 다른 이름으로 사용하기 때문에 거기에 맞춰서 사용하시면 됩니다.

그리고 만약 굳이 하나로 감쌀 필요가 없는 경우에는 아래 코드와 같이 Fragment를 사용해서 처리하시면 됩니다.

function MyComponent(props) {
    return (
        <>
            <div>Hello</div>
            <div>world</div>
        </>
    );
}

export default MyComponent;

Fragment에 대한 자세한 내용은 아래 링크를 참고하시기 바랍니다.

https://react.dev/reference/react/Fragment

모든 스타일들을 styled-components로 작성해야 하는지?

이것 역시도 정해진 법칙은 없습니다.

다만, 스타일링을 하는 방식이 워낙 다양하기 때문에 한 가지 방식으로 처리하는게 코드 재사용성과 유지보수 측면에서 좋긴 합니다.
(CSS, SCSS, TailwindCSS, styled-components 등)

만약 styled-components도 사용하면서 별도의 CSS파일을 사용한다면 스타일이 한 곳에서 관리되지 않기 때문에, 예상치 못한 스타일이 적용되고 해당 속성이 어디에 명시되어 있는지 찾기 어려운 문제가 생길 수 있습니다.

그리고 해당 컴포넌트를 다른 프로젝트에서 재사용하고 싶다면 컴포넌트 파일과 CSS파일을 함께 복사해서 가져가야 하기 때문에 재사용성도 떨어질 수 있습니다.

그래서 저 같은 경우에는 하나의 애플리케이션에서는 최대한 한 가지 스타일링 방식을 적용하는 편입니다.
애플리케이션 전체에 걸쳐서 공통적으로 적용되어야 하는 스타일만 globals.css 등을 통해 관리하고 나머지는 스타일링 라이브러리를 통해서 처리하는 식이죠.

그리고 styled-components를 사용하면서도 반복적으로 사용되는 스타일들은 별도로 선언하여 관리할 수 있습니다. 이러한 것을 mixin이라고 부르는데, 자세한 내용은 아래 링크를 참고하시면 좋을 것 같습니다! 😀
https://maddev.netlify.app/development/styled_components_mixins/

감사합니다.

인프런 커뮤니티 질문&답변