React의 Style

민정이등장·2024년 11월 26일
ReactSassscssstyled components
0
post-thumbnail

React 스타일링 방식

React에서 컴포넌트에 스타일을 적용하는 방법은 크게 네 가지로 나뉜다.

  1. 일반 CSS
  2. CSS Modules
  3. Sass (SCSS)
  4. Styled-Components

1. 일반 CSS

일반 CSS란?

  • 기존의 CSS 파일을 활용하여 스타일을 작성.
  • HTML과 CSS를 사용한 경험이 있다면 가장 익숙한 방식.
  • 파일을 컴포넌트에 import하여 사용.

사용 방법

  1. CSS 파일 생성:

    /* styles.css */
.container {
  background-color: lightblue;
  padding: 20px;
}
.title {
  font-size: 24px;
  color: darkblue;
}

  2. 컴포넌트에서 import:

    import "./styles.css";

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello, React!</h1>
    </div>
  );
}

장점

  • 간단하고 직관적임.
  • CSS로 잘 설계된 프로젝트에 빠르게 적용 가능.

단점

  • 전역 네임스페이스 때문에 클래스 이름 충돌 가능.
  • 컴포넌트 간 스타일 캡슐화가 불가능.

해결 방안

  1. 이름 규칙 정하기 :

    • 이름 - 클래스 형태로 이름 만들기 App-logo
    • BEM 네이밍 app_title-primary
      • BEM
        • Block : 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트
        • Element : 블럭을 구성하는 단위
        • Modifier : 블럭이나 엘리먼트의 속성

  2. CSS Selector 활용 :

    /* container 컴포넌트 내부의 header 테그만 의미 */
.container .header {
  font-size: 20px;
}

2. CSS Modules

CSS Modules란?

  • CSS 파일을 자동으로 컴포넌트에 고유화된 클래스로 변환.
  • 파일명클래스명해시값 형태로 자동 변환
  • 클래스 이름 충돌을 방지하고, 컴포넌트 스타일을 캡슐화.

사용 방법

  1. CSS Module 파일 생성 : 컴포넌트명.module.css로 css파일 생성

    파일명에 .module.css를 추가.

    /* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

  2. 컴포넌트에서 import : import로 불러온 후 객체 형태로 사용

    import styles from "./Button.module.css";

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

장점

  • 클래스 이름이 자동으로 고유화되므로 충돌 걱정이 없음.
  • 프로젝트가 커질수록 관리가 용이.

단점

  • 동적 스타일링이 어려움.
  • 클래스 이름을 객체로 참조해야 하므로 약간의 코드가 추가됨.

3. Sass (SCSS)

Sass란?

  • CSS 전처리기 중 하나로, Syntactically Awesome Stylesheets의 약자.
  • 변수를 사용하거나, 중첩, 믹스인, 연산 등을 통해 재사용성과 가독성을 높임.
  • SCSS와 Sass 두 가지 확장자를 제공:
    - .scss: CSS와 비슷한 문법.
    - .sass: 간결하지만, 세미콜론과 중괄호를 생략.

    전처리기란?
    자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램이다.
    변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다.

Sass는 중괄호 대신 들여쓰기로 구문을 감지하고, 세미콜론을 사용하지 않는다.

예 ) 

```jsx
body
    color: #333
    background-color: #fff
```

사실 이렇게 사용하면 불편함을 느낄 수 있다. (코드들이 많아지면 헷갈리고 꼬일 수 있다.) 이런 불편함을 느끼는 사람들을 위해 CSS 친화적인 Sassy CSS를 의미하는 SCSS를 제공하게 되었다.

.scss 확장자를 사용할 경우, css와 거의 비슷한 문법으로 Sass를 사용할 수 있다.

설치 명령어

npm install sass

사용 방법

  1. Sass 파일 생성 :

    /* styles.scss */
$primary-color: #3498db;

.container {
  background-color: $primary-color;
  padding: 20px;

  .title {
    font-size: 24px;
    color: darkblue;
  }
}

  2. 컴포넌트에서 import:

    import "./styles.scss"; // 뒤에 .scss 붙여줘야함!!

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello, SCSS!</h1>
    </div>
  );
}

주요 기능

  1. 변수 : $기호로 변수를 사용할 수 있다. $변수명:속성값으로 변수에 속성을 지정하고, 해당 속성 값을 사용하고 싶은 곳에 $변수명을 작성한다.

    $font-size: 16px;

.text {
  font-size: $font-size;
}

  2. 중첩 : 선택자를 중첩시켜 코드의 중복을 줄이고, 가독성을 높인다.

    .container {
  .header {
    font-size: 24px;
  }
}
    @mixin button-style($bg-color, $font-size) {
  border: none;
  border-radius: 0.5rem;
  background-color: $bg-color;
  color: #fff;
  font-size: $font-size;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s;

  // 중첩 사용 예시
  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

    나 자신을 의미하는 & 기호를 사용해서 자신을 선택할 수 있다.

    그리고 상위 선택자를 반복하지 않고 자식을 선택할 수 있다.

  3. 믹스인 : 미리 css 코드 블록을 정의하여 재사용

    @mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  @include flex-center;
}

  4. 연산:

    .box {
  width: 100px - 20px; // 결과: 80px
}

  5. 확장 (Extend) : 기존의 선택자 스타일을 다른 선택자에게 상속

    .shared-style {
  color: white;
  background: black;
}
.button {
  @extend .shared-style;
}

  6. 부분 파일과 @import

    • 부분파일 : 이름앞에 _(언더바)가 붙은 파일로, 다른 Sass 파일로 가져올 수 없지만 단독으로는 css로 컴파일되지 않는다.
    • _(언더바) 는 css 파일로 변환될 필요가 없음을 알린다.
    • @import : @import규칙을 사용하여 이러한 파일을 Sass 파일로 가져올 수 있다. 장점 : 코드를 모듈화 하고 재사용성을 높인다.
      /* _파일명.scss */

// scss 파일 명 앞에 _ 의미
// : 이 파일은 css 파일로 변환될 필요가 없음을 알림

$color-first: red;
$color-second: orange;
$color-third: yellow;

$breakpoint-sm: 360px;
      이렇게 만든 파일을 @import “./파일명.scss” 이렇게 불러온다.

4. Styled-Components 💅

Styled-Components란?

  • CSS-in-JS 방식으로, JavaScript 파일 내에서 CSS를 작성.
  • class나 id같은 선택자를 사용하지 않고, 스타일을 지정한 컴포넌트를 만드는 것처럼 작성.
  • 컴포넌트별 스타일을 캡슐화하며, 동적 스타일링도 가능.

설치 명령어

npm install styled-components

사용 방법

팁! VSCODE 사용자라면 vscode-styled-components 확장팩을 설치하자!

  1. 스타일 정의 : 먼저 사용할 컴포넌트 파일에서 해당 패키지를 import한다.

    import styled from "styled-components";

    import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props) => props.bgColor || "blue"};
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;
    • 생성할 styled-components이름을 변수에 선언하고, 값으로 styled.생성할 태그를 작성한다. 그리고 백틱을 사용해 스타일 속성을 지정해준다.
    • styled-components는 컴포넌트처럼 props를 사용할 수 있고, 이 props를 사용해 조건문도 작성할 수 있다.

  2. 컴포넌트에서 사용:

    function App() {
  return <Button bgColor="green">Click Me</Button>;
}

    생성한 styled-components는 일반 컴포넌트를 사용하는 것처럼 사용할 수 있다. 여는태그와 닫는 태그로 작성할 수 있고, 단일 태그 형태로도 작성할 수 있다.

    styled-components는 지정한 스타일 속성을 상속 받을 수 있다.

    const 컴포넌트이름 = styled(상속 받을 컴포넌트)`
추가할 스타일 속성;
`;

    상속받을 컴포넌트 이름을 선언하고 값으로 styled(상속 받을 컴포넌트)으로 작성한 다음 추가할 스타일 속성이 있다면 백틱으로 감싸 작성해준다.

장점

  • JavaScript와 CSS가 한 파일에 있어 코드 구조가 명확.
  • 동적 스타일링이 쉬움.
  • 컴포넌트 내부에 작성하고, class나 id같은 선택자를 사용하지 않기 때문에 css가 중첩되지 않음.

단점

  • 런타임에 스타일을 처리하므로 퍼포먼스가 약간 떨어질 수 있음.

정리

스타일링 방식장점단점주요 특징
일반 CSS간단하고 익숙함.클래스 충돌 가능.전통적인 방식. BEM으로 클래스 관리 가능.
CSS Modules고유 클래스 이름 자동 생성. 컴포넌트 스타일 캡슐화.동적 스타일링이 어려움.파일명에 .module.css 필요.
Sass (SCSS)변수, 중첩, 믹스인 등 강력한 기능 제공.CSS 파일로 컴파일이 필요.CSS 전처리기로 유지보수에 강점.
Styled-Components동적 스타일링 가능. 컴포넌트 단위 캡슐화.런타임 처리로 약간의 성능 저하.CSS-in-JS 방식. JS와 CSS 통합.
profile
민정이등장
킵고잉~
이전 포스트

React Hook Form

다음 포스트

React의 Router

0개의 댓글