카테고리 없음

내 맘대로 골라담은 리액트 스타일 적용 방법 모음

minnote29 2025. 3. 23. 20:16

Css vs Sass vs Styled-components vs Stylesheet 리액트 스타일 적용하는 방식이 여러가지가 있지만, 그나마 관심 있는, 해보고 싶은, 해봤던, 흔한 방식을 위주로 정리를 하려고 한다.

 

 

💿 Css

Cascading Style Sheets(CSS) - html이나 xml(svg, xhtml 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. css는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정한다.
    • 웹페이지를 꾸미려고 작성하는 코드
    • 실제로 프로그래밍 언어는 아니다.
    • 마크업(markup) 언어도 아니다. - HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말.

ruleset - 선택자(selector) rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택한다. (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔야 한다. 선언 color: red;와 같은 단일 규칙이다. 속성(property) 주어진 HTML 요소를 꾸밀 수 있는 방법이다. (이 예에서, color는 p 요소의 속성.) CSS에서, rule 내에서 영향을 줄 속성을 선택한다. 속성 값 속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖는다 (color 의 값에는 red 외에 많은 것이 있다). 

    • 일명, 박스 - CSS 작성에서 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 것. — 그들의 크기, 색상, 위치 등을 설정하는 것. 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있다.
      • CSS 레이아웃은 박스모델 을 주 기반으로 하고 있다.
      • 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:
        1. padding, 컨텐트 주위의 공간 (예, 문단 글자의 주위)
        2. border, padding 의 바깥쪽에 놓인 실선
        3. margin, 요소의 바깥쪽을 둘러싼 공간
        4. width (한 요소의 너비)
        5. background-color, 요소의 콘텐츠와 padding 의 배경 색
        6. color, 한 요소의 콘텐츠 색 (일반적으로 글자색)
        7. text-shadow: 한 요소 안의 글자에 그림자를 적용
        8. display: 요소의 표시 형식을 설정합니다 (이것에 대해선 아직 걱정하지마세요)

 

💿 Sass

Sass는 CSS 로 컴파일된 스타일시트 언어이다 . 변수 , 중첩 규칙 , 믹스인 , 함수 등을 사용할 수 있으며 , CSS와 완벽하게 호환되는 구문을 모두 사용할 수 있다. Sass는 대규모 스타일시트를 잘 정리하는 데 도움이 되며 프로젝트 내부와 프로젝트 간에 디자인을 쉽게 공유할 수 있다. Node.js를 사용하는 경우 npm을  실행하여 Sass를 설치할 수 있다.

npm install -g sass

하지만 이렇게 하면 Sass의 순수 JavaScript 구현이 설치되는데, 여기에 나열된 다른 옵션보다 다소 느리게 실행된다. 하지만, 인터페이스는 동일하므로 나중에 조금 더 빠른  속도가 필요하면 다른 구현으로 쉽게 바꿀 수 있다!

Sass에는 중첩, 믹스인, 상속 및 견고하고 유지 관리 가능한 CSS를 작성하는 데 도움이 되는 기타 멋진 기능과 같이 CSS 에 아직 존재하지 않는 기능이 있다. Sass를 사용하기 시작하면 사전 처리된 Sass 파일을 가져와 웹사이트에서 사용할 수 있는 일반 CSS  파일로 저장한다. 

 

변수 - 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법으로 생각해야 한다. 

    • Sass를 사용하면 HTML 의 동일한 시각적 계층을 따르는 방식으로 CSS 선택기를 중첩할 수 있다. 지나치게 중첩된 규칙은 유지 관리하기 어려울 수 있는 과도하게 한정된 CSS를 초래하며 일반적으로 나쁜 관행으로 간주된다.
    • 다른 Sass 파일에 포함할 수 있는 작은 CSS 스니펫이 포함된 부분 Sass 파일을 만들 수 있다. 이것은 CSS를 모듈화 하고 유지 관리를 더 쉽게 하는 좋은 방법이다. partial은 밑줄로 시작하는 Sass 파일이다. 
    • 모든 Sass를 단일 파일에 작성할 필요는 없다. @use규칙을 사용하여 원하는 대로 분할할 수 있다. 이 규칙은 다른 Sass 파일을 모듈로 로드한다. 즉, 파일 이름을 기반으로 하는 네임스페이스를 사용하여 Sass 파일에서 변수, 믹스인 및 함수를 참조할 수 있다. 파일을 사용하면 컴파일된 출력에 생성된 CSS도 포함된다!
    • CSS 의 일부 항목은 쓰기에 약간 지루하다. 특히 CSS3 와 존재하는 많은 공급업체 접두사가 있는 경우 더욱 그렇다. 믹스인을 사용하면 사이트 전체에서 재사용하려는 CSS 선언 그룹을 만들 수 있다. Sass를 매우 DRY하게 유지하는 데 도움이 된다. 값을 전달하여 믹스인을 더 유연하게 만들 수도 있다. 믹스인을 만들려면 @mixin지시문을 사용하여 이름을 지정한다.
    • 확장/상속을 사용하면 한 선택기에서 다른 선택기로 CSS@extend 속성 집합을 공유할 수 있다. 
    • CSS 에서 수학을 하는 것은 매우 유용하다. Sass에는 +, -, *, math.div(), 와 같은 몇 가지 표준 수학 연산자가 있다. 

 

💿Styled-components

태그드 템플릿 리터럴(최근에 추가된 JavaScript 기능)과 CSS의 강력함을 활용하여, styled-components는 실제 CSS 코드를 사용하여 컴포넌트를 스타일링할 수 있게 해준다. 또한 컴포넌트와 스타일 간의 매핑을 제거하여, 컴포넌트를 저수준의 스타일링 구성 요소로 사용하는 것이 그 어느 때보다 더 쉬워졌다!

 

장점:

  1. 자동 critical CSS: 페이지에 렌더링된 컴포넌트의 스타일만 자동으로 주입된다.
  2. 고유한 클래스명 생성: 클래스명이 중복되거나 겹치는 문제 없이 고유한 클래스명을 생성한다.
  3. 스타일 삭제 용이: 사용되지 않는 컴포넌트를 삭제하면 해당 스타일도 자동으로 삭제된다.
  4. 동적 스타일링: props나 전역 테마에 따라 컴포넌트 스타일을 동적으로 변경할 수 있다.
  5. 유지보수 용이: 스타일이 컴포넌트와 연결되어 있어, 스타일을 찾기 위해 여러 파일을 확인할 필요가 없다.
  6. 자동 벤더 프리픽싱: CSS를 작성할 때, 벤더 프리픽싱을 자동으로 처리한다.

설치 방법:

  • npm: npm install styled-components
  • yarn: yarn add styled-components

Babel 플러그인을 사용하는 것이 추천되며, 이는 클래스명을 더 읽기 쉽게 하고, 서버 사이드 렌더링(SSR)과 호환성 문제를 해결하는 데 도움이 된다.

 

기본 사용법:

  • 컴포넌트 정의: 
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

이 코드는 Title이라는 <h1> 요소에 스타일을 적용한다.

  • 컴포넌트 사용:
render(
  <Wrapper>
    <Title>Hello World!</Title>
  </Wrapper>
);

 

  • props 기반 동적 스타일링:
    • 스타일을 props에 따라 동적으로 변경할 수 있다. 예를 들어, primary라는 props 값을 기반으로 버튼의 배경색과 글자색을 바꿀 수 있다.
const Button = styled.button<{ $primary?: boolean; }>`
  background: ${props => props.$primary ? "#BF4F74" : "white"};
  color: ${props => props.$primary ? "white" : "#BF4F74"};
`;
  • 스타일 확장:
    • 기존 스타일을 확장하고 싶을 때 styled()를 이용하여 스타일을 재사용할 수 있다.
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

 

  • 컴포넌트에 스타일링 적용:
    • styled() 메서드는 HTML 요소뿐만 아니라, 다른 React 컴포넌트에도 스타일을 적용할 수 있다. 예를 들어, Link 컴포넌트에 스타일을 추가할 수 있다.
  • 속성 전달 및 필터링:
    • 스타일링된 컴포넌트는 props를 DOM 요소에 전달할 수 있다. 예를 들어, Input 컴포넌트는 defaultValue, type 등의 속성을 전달받아 실제 <input> 요소로 렌더링된다.
  • CSS에서 styled-components로의 전환:
    • 기존에 CSS 파일을 사용하던 방식에서 styled-components를 사용하면, 스타일을 컴포넌트와 함께 묶어서 관리할 수 있어 더 효율적이다.
  • 애니메이션:
    • @keyframes를 사용하여 애니메이션을 정의할 수 있다. 스타일 컴포넌트 내에서 keyframes를 사용하여 독립적인 애니메이션을 생성하고, 이를 다른 컴포넌트에서 재사용할 수 있다.
  • React Native에서 사용:
    • styled-components는 React Native에서도 사용 가능하다. React Native 전용 styled-components/native 패키지를 사용하여 스타일링할 수 있다.
결론: styled-components는 React 컴포넌트의 스타일링을 더 직관적이고 효율적으로 만들어주는 도구이다. CSS를 직접 작성하되, 이를 컴포넌트와 연결하여 관리하고, 동적 스타일링 및 컴포넌트 확장, 속성 전달 등을 통해 매우 유연한 스타일링 시스템을 제공한다.

 

 

💿Tailwind Css 

Tailwind CSS는 모든 HTML 파일, JavaScript 컴포넌트, 기타 템플릿에서 클래스 이름을 스캔하여 해당 스타일을 생성하고 이를 정적 CSS 파일에 작성하는 방식으로 동작한다. 빠르고, 유연하며, 신뢰할 수 있는 방식으로 런타임이 필요 없다.
  • 설치 방법 
    • Vite 플러그인으로 Tailwind CSS 설치하기 Tailwind CSS를 Vite 플러그인으로 설치하는 것은 Laravel, SvelteKit, React Router, Nuxt, SolidJS와 같은 프레임워크와 통합하는 가장 매끄러운 방법이다.
      • Tailwind CSS 설치하기 - npm을 통해 tailwindcss와 @tailwindcss/vite를 설치한다.
        • $ npm install tailwindcss @tailwindcss/vite
      • Vite 플러그인 설정하기 - Vite 설정 파일에 @tailwindcss/vite 플러그인을 추가한다.
      • Tailwind CSS 불러오기 - CSS 파일에 Tailwind CSS를 불러오는 @import 문을 추가한다.
      • 빌드 프로세스 시작하기 - npm run dev 또는 package.json 파일에 설정된 명령어를 실행하여 빌드 프로세스를 시작한다.
        • $ npm run dev
      • HTML에서 Tailwind 사용하기 - 컴파일된 CSS가 <head>에 포함되어 있는지 확인한 후 (프레임워크가 이를 처리할 수 있음), Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하기 시작한다.
  • 유틸리티 클래스 (Utility Classes)
    • Tailwind CSS의 핵심은 유틸리티 클래스이다. 이는 스타일을 직접적으로 정의하는 작은 CSS 클래스를 제공하는 방식으로, 컴포넌트나 요소에 적용하여 스타일을 적용한다. 예를 들어, 텍스트 크기, 여백, 색상 등을 클래스로 정의할 수 있다.
  • 반응형 디자인 (Responsive Design)
    • Tailwind는 반응형 디자인을 손쉽게 구현할 수 있도록 도와준다. 기본적으로 Tailwind의 클래스는 화면 크기에 따라 자동으로 적용되지 않지만, 화면 크기 별로 특정 스타일을 적용하려면 반응형 프리픽스를 사용한다.
  • 디자인 시스템 (Design System)
    • Tailwind는 디자인 시스템을 구성할 수 있도록 미리 정의된 색상, 폰트, 간격, 크기 등을 제공한다. 이를 통해 일관성 있는 UI 디자인을 손쉽게 만들 수 있다.
  • 중첩 클래스 (Combining Classes)
    • Tailwind는 다양한 유틸리티 클래스를 조합하여 매우 세밀하게 스타일을 정의할 수 있다. 여러 클래스를 한 요소에 동시에 적용하여 복잡한 디자인을 만들 수 있다.
  • 커스터마이징 (Customization)
    • Tailwind는 tailwind.config.js 파일을 통해 디자인 시스템을 커스터마이징 할 수 있다. 이 파일에서는 색상, 폰트, 간격 등을 변경하여 프로젝트의 스타일을 전반적으로 수정할 수 있다.
  • 플러그인 (Plugins)
    • Tailwind는 다양한 플러그인을 지원하여 기능을 확장할 수 있다. 예를 들어, 폼 스타일링, 애니메이션, 그리드 시스템 등을 플러그인으로 추가할 수 있다.
  • CSS 파일의 최적화 (Purging CSS)
    • Tailwind는 모든 클래스를 사용하지 않으면 불필요한 CSS 코드가 번들에 포함될 수 있다. 이를 방지하기 위해 Purging 기능을 사용하여 실제로 사용하는 클래스만 남기고 나머지는 제거할 수 있다.
  • 다크 모드 (Dark Mode)
    • Tailwind는 다크 모드를 쉽게 지원한다. dark 프리픽스를 사용하여 다크 모드에서 스타일을 다르게 적용할 수 있다.

 

💿 Stylesheet

Stylesheet (스타일시트)는 HTML 문서에서 콘텐츠의 외관을 정의하는 CSS(Cascading Style Sheets) 파일이다. 스타일시트는 웹 페이지의 레이아웃, 색상, 글꼴 등을 정의하는 데 사용된다. 
  • 스타일시트 기본 구조 (Basic Structure)
    • 스타일시트는 CSS 문법을 사용하여 작성된다. 기본적으로 각 스타일 규칙은 선택자(selector)와 선택된 요소의 스타일(properties)로 이루어진다.
  • 스타일시트 연결 방법 (Linking Stylesheet)
    • 스타일시트를 HTML 문서에 연결하는 방법은 크게 두 가지가 있다.
    • 1) 내부 스타일시트 (Internal Stylesheet)
      • HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 스타일을 정의할 수 있다.
    • 2) 외부 스타일시트 (External Stylesheet)
      • CSS를 별도의 .css 파일에 작성하고, 이를 HTML 파일에 <link> 태그로 연결하는 방식이다. 이 방법은 여러 HTML 파일에서 동일한 스타일시트를 사용할 때 유용하다.
  • 스타일 우선순위 (Cascading and Specificity)
    • CSS의 "Cascading"은 스타일이 충돌할 때 어떻게 우선순위를 결정할지에 관한 규칙이다. 스타일 우선순위는 주로 선택자의 구체성에 따라 결정된다.
  • 클래스와 ID (Classes and IDs)
    • 클래스 (Class): 여러 HTML 요소에 적용할 수 있는 스타일을 정의한다. 클래스 선택자는 .으로 시작한다.
    • ID (ID): 페이지에서 고유한 단일 요소에만 적용할 수 있는 스타일을 정의한다. ID 선택자는 #으로 시작한다.
  • 박스 모델 (Box Model)
    • CSS에서 모든 요소는 박스 모델에 따라 레이아웃을 구성합니다. 박스 모델은 각 요소를 컨텐츠 영역, 패딩, 테두리, 마진으로 나누어 이해할 수 있습니다. 
      • content: 실제 콘텐츠 영역 (텍스트, 이미지 등)
      • padding: 콘텐츠와 테두리 사이의 공간
      • border: 요소의 테두리
      • margin: 요소와 다른 요소 사이의 공간
  • 디스플레이 속성 (Display Property)
    • display 속성은 요소가 페이지에서 어떻게 배치될지를 결정한다. 대표적인 값으로는 block, inline, inline-block, flex, grid, none 등이 있다.
      • block: 요소는 전체 너비를 차지하고, 새로운 줄에서 시작된다.
      • inline: 요소는 줄에 맞춰서 배치되며, 크기만큼만 차지한다.
      • flex: 부모 요소에서 자식 요소를 유연하게 배치한다.
      • grid: 격자 레이아웃 시스템을 사용하여 요소를 배치한다.
      • none: 요소를 화면에서 보이지 않게 한다.
  • 가상 클래스와 가상 요소 (Pseudo-classes and Pseudo-elements)
    • 가상 클래스: 특정 상태의 요소에 스타일을 적용한다. (:hover, :focus, :active 등)
    • 가상 요소: 특정 부분에 스타일을 적용한다. (::before, ::after 등)
  • 애니메이션 (Animations)
    • CSS 애니메이션을 사용하면 요소의 스타일 변화를 부드럽게 적용할 수 있다. @keyframes와 animation 속성을 사용한다.
  • 미디어 쿼리 (Media Queries)
    • 미디어 쿼리는 화면 크기나 디바이스 특성에 따라 스타일을 변경할 수 있도록 해주는 CSS 기능이다. 반응형 웹 디자인을 구현하는 데 사용된다.
  • CSS 변수 (CSS Variables)
    • CSS 변수는 값에 이름을 지정하여 재사용할 수 있게 해주는 기능이다. 변수는 --로 시작한다.