[2024 여름방학 React.js 스터디] 정채은 #5주차

[2장 - 1] Sass

 

<CSS의 기본 문법을 확장하여 코드의 재사용성과 유지보수성을 높이는 데 도움을 주는 Sass의 다양한 기능을 소개>

 

Sass는 CSS의 기능을 확장해주는 전처리기이며, .scss와 .sass 두 가지 문법을 지원

.scss 문법이 더 널리 사용되므로, 이 튜토리얼에서는 .scss를 중심으로 진행

Sass 기본 개념

1. Sass의 문법:
   • .scss: CSS와 유사한 문법을 사용하여, 기존 CSS와의 호환성 굳
   • .sass: 더 간결한 문법을 사용하지만, CSS와의 호환성은 떨어질 수 있음.
2. 변수 사용: Sass에서는 변수를 사용하여 반복되는 값들을 관리 가능
                    예를 들어, 버튼 색상을 변수로 정의하고 이를 여러 곳에서 재사용 가능
3. Mixin: 반복되는 CSS 코드 블록을 재사용할 수 있는 방법
               예를 들어, 버튼 색상에 대한 mixin을 정의하여 다양한 버튼 색상에 적용 가능

React와 Sass 통합

1. 리액트 프로젝트 설정: 새로운 리액트 프로젝트를 생성하고 node-sass를 설치하여 Sass를 사용할 준비
2. 컴포넌트 작성 및 스타일링:
   • Button 컴포넌트를 생성, Sass를 사용하여 스타일을 정의
   • Button.scss 파일에서 색상, 크기, 상태에 따른 스타일을 정의하고, mixin을 사용하여 코드 중복을 줄이기
3. 동적 클래스 이름:
      classNames 라이브러리를 사용하여 버튼의 크기와 색상 등을 동적으로 적용 가능
4. 추가 옵션 구현:
   • outline: 버튼의 테두리만 보이도록 하는 옵션.
   • fullWidth: 버튼이 부모 요소의 전체 너비를 차지하도록 하는 옵션.
   • ...rest를 사용하여 버튼에 추가적인 props를 전달 가능.

 

이벤트 핸들러와 Rest Props 사용하기

1. Button.js 수정:
   • ...rest 문법을 사용하여 추가적인 props (예: onClick, onMouseMove)을 <button> 요소에 전달
2. App.js 수정:
   • 버튼에 onClick 이벤트를 추가하여 클릭 이벤트가 제대로 호출되는지 확인

정리

이 튜토리얼을 통해 Sass의 기본적인 사용 방법을 익히고, 리액트와 Sass를 함께 사용하는 방법을 배움.

Sass의 강력한 기능을 활용하여 스타일을 더 효율적으로 관리하자 !!!!

 

[2장 - 2] CSS Module

CSS Module은 리액트 프로젝트에서 스타일링 시 클래스 이름 충돌을 방지하는 매우 유용한 도구

이 기술을 이해하고 제대로 활용하면, 특히 큰 규모의 프로젝트나 레거시 프로젝트에서 효과적 사용 가능


1. 기본 개념:
   - 고유한 클래스 이름 생성: CSS Module은 각 파일에서 정의된 클래스 이름을 고유하게 변환.

                                                    이로 인해 동일한 이름의 클래스가 다른 컴포넌트에서 사용되더라도 충돌이 발생x

                                                    예를 들어, `Box.module.css`의 `.Box` 클래스는 `styles.Box`로 접근되며,

                                                   고유한 이름으로 변환.

2. 사용법:
   - 파일 확장자: CSS Module을 사용하려면 파일 확장자를 `.module.css`로 설정.
   - import 방식: CSS 파일을 `import`한 후, `styles` 객체를 통해 클래스 이름에 접근해야 함.
   - Sass와의 통합: Sass를 사용하는 경우, `.module.scss` 확장자를 사용하여 동일한 기능 활용.

3. 동적 클래스 관리:
   - classnames 라이브러리: 여러 클래스를 조합하거나 조건부로 클래스를 적용할 때, `classnames` 라이브러리의 `bind` 기능을 사용하면 더 편리

4. 전역 및 로컬 스타일링:
   - 전역 스타일: CSS Module에서 전역 스타일을 적용하려면 `:global` 키워드 사용
   - 로컬 스타일: CSS Module을 사용하지 않는 곳에서 특정 클래스만 로컬로 적용하려면 `:local` 키워드 사용

<<<주의사항>>>

1. 파일 확장자 실수:
   - 파일 확장자를 `.module.css`로 하지 않으면 CSS Module 기능이 작동 X

     일반 `.css` 파일로 작성할 경우 클래스 이름이 고유하지 않으므로, 기존 CSS 클래스와 충돌 할수도...

2. 클래스 이름 접근 방식:
   - CSS Module에서 클래스 이름에 하이픈(`-`)이 포함된 경우, `styles['class-name']` 형식으로 접근
   - 여러 클래스를 적용할 때는 `${styles.one} ${styles.two}`와 같은 방식으로 작성해야 하며,

     이 경우 `classnames` 라이브러리를 사용 ㄱㄱ

3. 동적 클래스 적용 시 번거로움:
   - 조건부로 여러 클래스를 적용할 때 `classnames` 없이 작성하면 코드가 복잡해질 수 있음.

      예를 들어, 조건에 따라 클래스를 다르게 적용할 때 번거로움 UP
   - 이때 `classnames` 라이브러리의 `cx` 기능을 사용하면 간단하게 처리가능.

4. 브라우저 개발자 도구에서 클래스 이름 확인:
   - CSS Module을 사용하면 개발자 도구에서 클래스 이름이 변환된 고유 이름으로 표시됨.

     이로 인해 원래 작성한 클래스 이름과는 다르게 보일 수 있으니, 디버깅 시 주의필요.

5. 의도하지 않은 전역 스타일:
   - `:global` 키워드를 사용할 때 의도치 않게 전역 스타일이 적용될 수 있음.

       전역 스타일은 정말 필요한 경우에만 사용하고, 가능한 한 로컬 스타일링을 유지하는 것이 BEST

<<<요약>>>

CSS Module은 리액트 프로젝트에서 CSS 클래스 이름 충돌을 완벽하게 방지해주는 강력한 도구임.

이를 사용하면 CSS 클래스 이름을 짧고 간단하게 유지하면서도, 스타일 충돌 없이 안전하게 사용가능.

그러나 파일 확장자, 클래스 접근 방식, 전역 스타일링 등의 세부 사항을 주의해야 하며,

특히 동적 스타일링에서는 `classnames` 라이브러리의 사용을 하길 바람.

이를 통해 효율적이고 유지보수하기 쉬운 스타일링을 구현가능.

 

[2장 - 3] styled-components

CSS in JS와 styled-components 소개

이번에 배워볼 기술은 CSS in JS입니다. 이는 자바스크립트 코드 안에 CSS를 작성하는 방법을 의미하며, 우리는 이를 구현하는 라이브러리인 styled-components를 살펴볼 것입니다. styled-components는 리액트에서 CSS in JS를 사용할 때 가장 인기 있는 라이브러리 중 하나입니다. 대안으로는 Emotion과 styled-jsx가 있습니다.

Tagged Template Literal

styled-components를 이해하기 위해서는 Tagged Template Literal 문법에 대해 알고 있는 것이 도움이 됩니다. Template Literal은 문자열을 보다 쉽게 조합할 수 있게 해주는 ES6 문법입니다. 이때 ${} 안에 일반 문자열이나 숫자 외에 객체나 함수 등을 넣을 수도 있습니다.

Tagged Template Literal은 이 문법을 확장하여, ${} 안에 넣은 자바스크립트 값을 조회하거나 변형할 수 있습니다. 이를 통해 텍스트와 변수 값을 별도로 처리하고 조합하는 작업을 할 수 있습니다.

styled-components 사용하기

styled-components를 사용하기 위해 먼저 새로운 리액트 프로젝트를 생성하고, styled-components 라이브러리를 설치합니다. 이후, 컴포넌트 스타일링을 위해 styled-components를 사용하여 컴포넌트를 정의할 수 있습니다.

예를 들어, styled-components를 사용하여 버튼 컴포넌트를 구현할 수 있습니다. 이 버튼은 기본 스타일 외에도 props를 통해 다양한 색상과 크기로 조절할 수 있습니다. ThemeProvider를 활용하면, 전역적으로 스타일 값을 설정하고 이를 모든 styled-components에서 사용할 수 있습니다.

Polished와 테마 적용하기

polished 라이브러리를 사용하면, 색상 변형과 같은 CSS 유틸리티 함수들을 사용할 수 있습니다. 이 라이브러리를 통해 색상을 밝게 하거나 어둡게 하는 등의 작업을 쉽게 할 수 있습니다.

ThemeProvider를 통해 전역적인 스타일 테마를 설정하면, styled-components에서 테마에 기반하여 스타일을 적용할 수 있습니다. 이를 통해 다양한 색상 옵션을 중앙에서 관리하고, 컴포넌트의 props를 통해 동적으로 색상을 변경할 수 있습니다.

리팩토링

버튼 컴포넌트를 더욱 깔끔하게 유지하려면, 스타일을 분리하여 재사용성과 유지보수성을 높일 수 있습니다. sizeStyles와 colorStyles와 같은 스타일을 별도의 변수나 함수로 분리하여, 반복되는 스타일 코드를 줄이고 관리하기 쉽도록 합니다.

추가 기능 구현

버튼 컴포넌트에 다양한 크기와 색상 옵션을 추가하는 것 외에도, outline 속성을 통해 버튼의 테두리만 있는 스타일을 구현할 수 있습니다. 이를 통해 버튼의 다양한 시각적 표현을 지원할 수 있습니다.
전체적인 내용을 요약해볼게요:

1. **Button 컴포넌트**:
   - 다양한 스타일과 기능을 갖춘 버튼을 구현했습니다.
   - 버튼 크기, 색상, 테두리, 전체 너비 등을 조정할 수 있으며, 이를 통해 여러 스타일의 버튼을 렌더링할 수 있습니다.

2. **Dialog 컴포넌트**:
   - 화면을 가리며 정보를 보여주는 다이얼로그를 만들었습니다.
   - `Button` 컴포넌트를 재사용하여 다이얼로그 내의 버튼을 스타일링했습니다.
   - 트랜지션 효과를 추가하여 다이얼로그의 등장과 퇴장을 부드럽게 처리했습니다.

3. **트랜지션 효과**:
   - `fadeIn`과 `slideUp` 애니메이션을 적용하여 다이얼로그의 등장 효과를 구현했습니다.
   - 사라지는 효과를 추가하기 위해 `animate`와 `localVisible` 상태를 관리하여 다이얼로그가 사라질 때도 트랜지션이 적용되도록 했습니다.

### 다이얼로그의 주요 특징:

- **트랜지션 효과**: 다이얼로그가 나타나고 사라질 때 애니메이션을 통해 부드럽게 전환됩니다.
- **버튼 커스터마이즈**: `ShortMarginButton`을 사용해 버튼 간격을 조절하여 다이얼로그의 버튼들이 적절하게 배치됩니다.
- **상태 관리**: `visible` props를 통해 다이얼로그의 가시성을 제어하며, `onConfirm` 및 `onCancel` 함수로 사용자 액션을 처리합니다.

### Dialog 컴포넌트의 동작 과정:

1. **초기 렌더링**: 다이얼로그는 `visible` props가 `true`일 때 렌더링됩니다.
2. **트랜지션 시작**: `visible`이 `true`에서 `false`로 바뀔 때, 다이얼로그는 `animate` 상태를 `true`로 변경하고, `localVisible` 상태를 업데이트합니다.
3. **사라짐**: 트랜지션이 끝난 후 `localVisible` 상태를 `false`로 설정하여 실제로 컴포넌트가 DOM에서 제거됩니다.

이제 이 모든 기능이 제대로 작동하는지 브라우저에서 확인해보세요. 각 버튼을 클릭하여 다이얼로그가 나타나고 사라지는 애니메이션이 제대로 적용되는지, 버튼 클릭 시 콘솔 로그가 출력되는지 확인하는 것이 좋습니다.

 

 

4o mini