안녕하세요 React로 토이프로젝트를 진행하면서 독학하고 있는 초보자입니다.

제가 Vue를 공부할 때는 한 파일 내부에 HTML, JS, CSS 모두 들어가있고 CSS는 그냥 HTML의 컴포넌트를 직접 지정했었는데요


리액트에서는 이미 기존에 있던 컴포넌트나 사용자 정의 컴포넌트를 스타일을 붙인 채 새로운 이름으로 감싸서 사용을 하더라구요

예를 들면 h1 태그에 스타일을 붙여서 StyledH1 태그로 사용한다던지 그러더군요


아무튼 그래서 로고나 네비게이션 바 같은 단일 컴포넌트는 다음처럼 만들었습니다.

이렇게 만드는 게 맞는건진 잘 모르겠어요

Vue로 할 때는 그냥 HTML은 이름 그대로 사용하고 스타일 먹일 때는 직접 그 태그를 사용하면 됐는데

이렇게 하면 무조건 최상위 컴포넌트의 이름을 다른거로 지정해줘야 돼서 불편하거든요

제가 혹시 잘못된 방법을 사용하고 있는 것은 아닌지 궁금합니다.