UI에 대한 질문이 있습니다

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

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

1. 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

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

    

   
   이것 역시도 정해진 법칙은 없습니다.
   
   다만, 스타일링을 하는 방식이 워낙 다양하기 때문에 한 가지 방식으로 처리하는게 코드 재사용성과 유지보수 측면에서 좋긴 합니다.

   (CSS, SCSS, TailwindCSS, styled-components 등)
   
   만약 styled-components도 사용하면서 별도의 CSS파일을 사용한다면 스타일이 한 곳에서 관리되지 않기 때문에, 예상치 못한 스타일이 적용되고 해당 속성이 어디에 명시되어 있는지 찾기 어려운 문제가 생길 수 있습니다.
   
   그리고 해당 컴포넌트를 다른 프로젝트에서 재사용하고 싶다면 컴포넌트 파일과 CSS파일을 함께 복사해서 가져가야 하기 때문에 재사용성도 떨어질 수 있습니다.

    

   
   그래서 저 같은 경우에는 하나의 애플리케이션에서는 최대한 한 가지 스타일링 방식을 적용하는 편입니다.
   애플리케이션 전체에 걸쳐서 공통적으로 적용되어야 하는 스타일만 globals.css 등을 통해 관리하고 나머지는 스타일링 라이브러리를 통해서 처리하는 식이죠.
   
   그리고 styled-components를 사용하면서도 반복적으로 사용되는 스타일들은 별도로 선언하여 관리할 수 있습니다. 이러한 것을 mixin이라고 부르는데, 자세한 내용은 아래 링크를 참고하시면 좋을 것 같습니다! 😀
   https://maddev.netlify.app/development/styled_components_mixins/

감사합니다.