[2025 1학기 React.js 스터디] 백채린 #5주차

 

1. Sass

: CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 분 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줌

 

▶ 2가지 확장자 지원 (.scss / .sass) 

 보통 scss 문법이 더 많이 사용돼서 .scss 확장자 스타일로 작성하겟씁니다.

 

1. 새로운 리액트 프로젝트 만들기

 

npx create-react-app styling-with-sass

 

 

2. 프로젝트 디렉터리에 node-sass 라는 라이브러리 설치

 

  cd styling-with-sass
  npm install node-sass

 

 

3. Button 컴포넌트 

 

src/components/

lighten() / darken() 과 같은 함수는 기존 css에서 사용하지 못하던 문법

 

결과 !!

 

 

 버튼 사이즈 조정

 

버튼 크기에 large, medium, small 설정할 수 있도록 구현해보자!

 

 

❓ className을 동적으로 설정하려면?

 

className={['Button', size].join(' ')} // 배열을 join
className={`Button ${size}`} // 템플릿 리터럴

 

 이렇게 하면 클래스가 많아질수록 가독성이 떨어지고 실수 ↑

→ 그래서, classnames 라이브러리 사용

 

classnames: 조건부 클래스 조합을 간단하게 처리할 수 있게 해줌

 

// classnames 라이브러리 설치
npm install classnames

 

props 값이 button 태그의 className으로 전달 → scss 에서 다른 크기를 지정해줘야 함

 

 

 

 

⚠️ App.js 를 작성하고 실행했는데 large medium small 로 돼있어야 하는 버튼이 large small medium 으로 돼있음 

→ defaultProps 가 적용되지 않았기 때문 !! 

(React 18 이후에서는 함수 컴포넌트에서 defaultProps가 안정적으로 동작하지 않을 수 있다고 함니다)

→ 구조 분해 시 기본값을 설정하는 방식으로 수정

 

function Button({ children, size = 'medium' }) {
  return <button className={classNames('Button', size)}>{children}</button>;
}

 

 

버튼들끼리 함께 있을 때에는 여백이 있도록 Button.scss 아래에 & + & (.Button + .Button 의미)  추가 

 

 

 버튼 색상 설정하기

 

 

→반복되는 코드가 많음

→ button-color라는 mixin을 만들어서 반복되는 색상 관련 코드를 재사용

 

 

 

→ 첫 번째 버튼 사이 간격을 띄게 하기위해 App.scss를 아래와 같이 수정

 

 

 

 outline 옵션 만들기

 

버튼에서 테두리만 보여지도록 설정해보자!

 

1. Button.js에서 outline props를 class로 전달

 

 

 

2. Button.scss에서 outline 스타일 정의

 

 

 

3. App.js에서 outline props 사용

 

 

 

 전체 너비 차지하는 옵션 (fullWidth 옵션)

 

1. Button 컴포넌트 수정

 

 

 

2. SCSS에 fullWidth 스타일 추가

 

 

 

3. App.js 에서 사용하기 

 

 

 

 ...rest props 전달하기

 

...rest를 통해 onClick, onMouseMove, disabled, type="submit" 등 모든 추가 속성 전달 가능

 

 

 

 

 

2. CSS Module

: 파일 단위로 CSS 클래스 이름의 범위를 제한해주는 기능

즉, 해당 컴포넌트에서만 사용할 수 있는 고유한 클래스 이름으로 자동 변환해줌

→ 같은 이름의 .Box 클래스를 여러 파일에서 써도 충돌하지 않음 !

 

className="Box" (일반 css) → className={styles.Box} (css Module)

 

내부적으로는 styles.Box는

<div class="Box_module__2zLKv">Hello CSS Module</div>

과 같이 고유한 클래스 이름으로 변환

→ Box.module.css의 .Box는 자동으로 파일명 + 클래스명 + 해시 형태의 고유한 이름으로 치환되기 때문에 다른 파일에서 쓰는 .Box와 충돌하지 않음

 

• 레거시 프로젝트에 리액트를 도입할 때 (기존 CSS 충돌 방지)
• CSS 네이밍 규칙(BEM 등)을 매번 생각하기 귀찮을 때
• 컴포넌트 단위로 스타일을 관리하고 싶을 때

 커스텀 체크박스 만들어보기

 

1. 새 프로젝트 생성

 

npx create-react-app styling-with-css-module

 

CRA(Create React App)에서는 기본적으로 webpack + css-loader가 적용되어 있어 CSS Module이 바로 동작하기 때문에 추가적인 설정은 필요없음

 

 

2. CheckBox 컴포넌트 만들기

 

 

💡 <label> 태그가 <input>과 텍스트를 감싸고 있기 때문에, 텍스트를 눌러도 체크박스가 반응함

 

 

 

3. 스타일링 해보기

 

하기 전에 react-icons 라는 라이브러리 설치해주세요

* react-icons: Font Awesome, Material Icons, Ionicons 등을 React 컴포넌트 형태로 사용할 수 있는 유용한 라이브러리

 

$ npm install react-icons

 

 

 

React에서 CSS Module을 사용할 땐 styles.className처럼 객체의 속성으로 접근해야 함
그런데 클래스 이름에 -가 들어가거나, 여러 클래스를 조건에 따라 조합해야 하는 경우라면? 매우 번거롭고 가독성 👎

💡 classnames + bind 로 해결

 

import classNames from 'classnames/bind';
import styles from './CheckBox.module.css';

// cx 함수 만들기
const cx = classNames.bind(styles);

 

• cx('클래스명') → 자동으로 styles['클래스명']으로 변환
• 여러 개도 가능: cx('a', 'b')
• 조건부도 가능: cx('base', { active: true, disabled: false })

 

그래서 이걸 CheckBox.js 에 적용하면

 

 

 

 

 

3. styled-components

 

⚠️ styled-components는 현재 기능 추가는 중단된 "유지보수 모드"에 들어간 상태라
기존 사용은 가능하지만, 새로운 프로젝트에는 Emotion, CSS Module, Tailwind CSS 등을 권장하는 추세라고 함니다........!

 

- CSS-in-JS

: JS 파일 안에 CSS 코드를 작성하는 패턴으로, 대표적인 라이브러리가 바로 styled-components !  

이 외에도 Emotion, styled-jsx 등이 있음

 

• 컴포넌트 단위로 스타일을 작성할 수 있는 CSS-in-JS 라이브러리
• 클래스 이름 중복 없이 고유한 스타일 생성
• JS 코드 안에서 props나 조건에 따라 동적 스타일링 가능

Tagged Template Literal 

 

// 템플릿 리터럴
const name = 'react';
const message = `hello ${name}`; // hello react

 

function tag(strings, ...values) {
  console.log(strings); // ["안녕하세요 ", "입니다."]
  console.log(values);  // ["철수"]
}
const name = "철수";
tag`안녕하세요 ${name}입니다.`;

 

→ 일반 템플릿 리터럴과 달리, template 전체를 함수(tag 함수)에 넘겨서 처리 가능

→ styled-components는 이 문법을 활용해 작동

 

const Box = styled.div`
  background: ${props => props.color};
`;

 

→ 이때 ${} 안에 함수를 넣으면, 컴포넌트의 props를 읽어 동적으로 스타일을 적용 가능

 

 

1. 새 프로젝트 생성

 

npx create-react-app styling-with-styled-components
cd styling-with-styled-components
npm install styled-components

 

 

2. 원형 컴포넌트 만들기

 

 

 

3. props에 따라 스타일 다르게 적용하기

 

props를 이용한 스타일링

 

→ Circle 컴포넌트에서 color props 값을 설정했으면 그 값을 배경색으로 설정, 그렇지 않으면 검정색을 배경색으로 사용

 

huge 라는 props를 통해 스타일 제어

 

→ styled-components에서 여러 줄 조건부 스타일을 줄 땐 css 함수로 감싸야 함

→ props.huge가 true일 때 width/height가 10rem으로 변경

 

 

polished의 스타일 관련 유틸 함수 사용하기

 

Sass에서 쓰던 lighten, darken 같은 색상 유틸리티 함수는 polished를 통해 React에서도 사용 가능 !

 

1. polished 라이브러리 설치

 

npm install polished

 

 

2. 사용하기

 

 

커서를 올렸을 때 색상이 바뀜

 

 

3. ThemeProvider로 전역 색상 관리하기

 

: styled-components 로 만드는 모든 컴포넌트에서 조회하여 사용 할 수 있는 전역적인 값을 설정 가능

 

// Button.js
import React from 'react';
import styled, { css } from 'styled-components';
import { darken, lighten } from 'polished';

const StyledButton = styled.button`
    /* 공통 스타일 */
    display: inline-flex;
    outline: none;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;

    /* 크기 */
    height: 2.25rem;
    font-size: 1rem;

    /* 색상 */
    ${({ theme, color = 'blue' }) => {
        const fallback = theme.palette.blue;
        const selected = theme.palette[color] || fallback;
        return css`
            background: ${selected};
            &:hover {
                background: ${lighten(0.1, selected)};
            }
            &:active {
                background: ${darken(0.1, selected)};
            }
        `;
    }}

        /* 기타 */
    & + & {
        margin-left: 1rem;
    }
`;

function Button({ children, color = 'blue', ...rest }) {
    return <StyledButton color={color} {...rest}>{children}</StyledButton>;
}

export default Button;