WINK-(Web & App)/React.js 스터디

[2025 1학기 React.js 스터디] 강민지 #5주차

kangmj0629 2025. 5. 22. 23:02
반응형

 

오5555주차 ..

 

1. Sass

->> CSS 코드를 깔끔하게 정리해주는거

 

(1) Sass VS Scss

위: Sass / 아래: Scss

: 보통 Scss 문법을 더 많이 씀 (CSS와 매우유사)

 

(2) Scss (!=CSS)

색상 스타일 변수에 저장 가능 !

 

유틸 함수 lighten(), darken() : 밝기 조절

 

(3) 다양한 옵션의 버튼을 만들어봅시다 ~~..

 

(3)-1 버튼 사이즈 조정

기본값 설정
className에 CSS 동적으로 넣어줌

className={`Button ${size}`}   <---   이렇게도 표현 O

 

조건부 스타일링 할 때는,

classNames 사용

examples..,

 

* .Button { &.large { } }   <=>   .Button.large { }

size값 설정하고 버튼 렌더링
여백 만들기 / Button.scss

* & + & : 같은 요소(.Button)가 연속할 때, 두 번째부터 적용됨(ex.여백)

 

(3)-2 버튼 색상 설정

 

*&는 현재 선택자(부모 선택자)를 대신함

즉, &.blue는 .Button.blue와 동일

hover, active 스타일 반복

=>>>

mixin 코드 사용

 

버튼 색상 코드 props로 전달 -

 

+

 

<<< outline 옵션 만들기 >>>

버튼 테두리 스타일

 

classNames('Button', size, color, { outline })

여기서, { outline } 이 true 일 때만 클래스 추가됨

.

props로 전달

 

+

 

<<< fullWidth 옵션 만들기 >>>

outline 옵션 만들기와 매우유사

(3)-3 ...rest props 전달하기

 

ex) onClick 설정 & onMouseMove 관리

Button.js

----->>>

편리함

나머지 props 모아서 <button>태그에 {...rest}

 

 

2. CSS Module

->> CSS 클래스 중첩되는거 방지

 

(1) CSS 파일의 확장자를 .module.css로

(2) 클래스 이름들이 고유해짐

즉, 다른 파일에서 같은 클래스 이름을 써도 중복 X

 

ex.

import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

 

className 을 설정할 때에는 styles.Box처럼 styles.클래스이름 형식으로 작성

-> box.module.css에서 .box로 만든 스타일 import

 

<<비교>>

원래 css에서는 <div className="Box">내용</div>

 

+++뒷내용 추가

 

클래스이름에 - 있으면 styles['my-class'] ,

클래스가 여러개면 ${styles.one} ${styles.two} 이런식으로 작성

 

+++매번 styles.클래스이름 쓰기 번거로울 때는 bind 기능 사용

 

->> cx(‘클래스이름‘) 으로 작성

문자열 형식으로 클래스 이름을 작성할 수 있어 편리하다 !

 

 

-

 

 

이렇게 CSS Module 말고도,

CSS 클래스 네이밍 규칙 BEM Convention 이란 것도 있는

 

개인적인 의견으로는

CSS Module이 컴퓨터가 자동으로 고유한 이름으로 바꿔주기 때문에 가장 사용하기 편한 것 같습니다.

 

 

체크박스 만들기 실습 !

여기서 …rest는 나머지 props인 onChange, name

((console.log(rest)로 나머지 props 알 수 있음))

 

렌더링하고 npm start

텍스트 부분을 선택해도 값이 바뀌는 이유는 ?

label 태그 안에 내용을 넣었기 때문

 

CheckBox.module.css 파일 만들어서 스타일링

 


***기타


만약, 클래스 이름 고유화 하지않고 전역에서 사용하고싶으면 :global 사용
반대로, CSS Module 을 사용하지 않는 곳에서 특정 클래스에서만 고유 이름 만들고싶으면 :local 사용

 

3. styled-components

->> JS 안에 CSS 작성하기

 

- Tagged Template Literal 문법 : 문자열을 함수처럼 처리 가능 -> ${ }

  제목: ${props => props.title}
  내용: ${props => props.body}

 

이렇게 함수를 넣어서 사용할 수도 있음

 

~~실습~~

- styled.div -> div 스타일링,

- color props 넣기 (따로 설정 안 하면 Circle 배경색 검정)

- huge props 추가

 

여기서 css 는 조건부 스타일 쓸 때 사용, js 안에서 진짜 css처럼 작성할 수 있도록 !

 


 

Button 컴포넌트 불러와서 styled-components 추가

렌더링 해주면

 

Sass 공부할 때 사용한 유틸 함수 lighten() , darken()

CSS in JS에서 사용하려면

->> polished 라이브러리 사용

import { darken, lighten } from 'polished';
background: #228be6;
  &:hover {
    background: ${lighten(0.1, '#228be6')};
  }

Button 컴포넌트에 이런식으로 추가

 

 

이제 회색, 핑크색 버튼 만들어봅시당

: ThemeProvider 기능 사용

->> 모든 컴포넌트에서 공통으로 사용할 수 있는 전역적인 값 설정

변수 선언하고 themeprovider로 감싸줌

**ThemeProvider 내부는 하나의 리액트 엘리먼트로 감싸져 있어야 한다

 

Button 컴포넌트에서 props.theme.palette.blue로 조회 O

BUT, 비구조화 할당 문법을 사용하는 것이 효율적

 

size props, outline props, fullWidth props 추가 + 렌더링 ..


Dialog 만들기

렌더링

 

 

<h3>과 <p>에 스타일링 줄 때 :

const DialogBlock = styled.div`
  h3 {}
  p {}
`;

 

 

 

각 버튼들에 onConfirm과 onCancel을 onClick으로 설정

그리고 visible props 추가 (컴포넌트 보여줄지/말지 , boolyn 함수와 유사)

 


트랜지션 구현하기

컴포넌트가 1. 나타날 때 / 2. 사라질 때 부드럽게 움직이게 하는 애니메이션

1. 컴포넌트가 나타날 때의 트랜지션 구현

- styled-components 에서 트랜지션을 구현할 때에는 keyframes 라는 유틸을 사용한다

 

2. 컴포넌트가 사라질 때의 트랜지션 구현

 

(1) 로컬 상태 관리

: animate 상태(지금 애니메이션 중인지) ,

localVisible 상태(지금 화면에 다이얼로그가 보이는지)

 

(2) useEffect 관리도구 , setTimeout 함수 사용

 

(3) 다이얼로그 숨길지 / 말지

 

 

+마지막으로 DarkBackground 와 DialogBlock 에 

disappear props 넣어서 사라지는 효과 만들어주면

 

 

 

끝 -

 

반응형