[2025 1학기 React.js 스터디] 강민지 #5주차
1. Sass
->> CSS 코드를 깔끔하게 정리해주는거
(1) Sass VS Scss
: 보통 Scss 문법을 더 많이 씀 (CSS와 매우유사)
(2) Scss (!=CSS)
(3) 다양한 옵션의 버튼을 만들어봅시다 ~~..
(3)-1 버튼 사이즈 조정
className={`Button ${size}`} <--- 이렇게도 표현 O
조건부 스타일링 할 때는,
classNames 사용
* .Button { &.large { } } <=> .Button.large { }
* & + & : 같은 요소(.Button)가 연속할 때, 두 번째부터 적용됨(ex.여백)
(3)-2 버튼 색상 설정
*&는 현재 선택자(부모 선택자)를 대신함
즉, &.blue는 .Button.blue와 동일
=>>>
mixin 코드 사용
버튼 색상 코드 props로 전달 -
+
<<< outline 옵션 만들기 >>>
버튼 테두리 스타일
classNames('Button', size, color, { outline })
여기서, { outline } 이 true 일 때만 클래스 추가됨
.
props로 전달
+
<<< fullWidth 옵션 만들기 >>>
outline 옵션 만들기와 매우유사
(3)-3 ...rest props 전달하기
ex) onClick 설정 & onMouseMove 관리
----->>>
나머지 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 내부는 하나의 리액트 엘리먼트로 감싸져 있어야 한다
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. 사라질 때 부드럽게 움직이게 하는 애니메이션
- styled-components 에서 트랜지션을 구현할 때에는 keyframes 라는 유틸을 사용한다
2. 컴포넌트가 사라질 때의 트랜지션 구현
(1) 로컬 상태 관리
: animate 상태(지금 애니메이션 중인지) ,
localVisible 상태(지금 화면에 다이얼로그가 보이는지)
(2) useEffect 관리도구 , setTimeout 함수 사용
(3) 다이얼로그 숨길지 / 말지
+마지막으로 DarkBackground 와 DialogBlock 에
disappear props 넣어서 사라지는 효과 만들어주면
끝 -