[2025 1학기 React.js 스터디] 이상래 #5주차

ㅋㅋ

🔍  Sass

Sass (Syntactically Awesome Style Sheets)

 

• CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 함
• 코드의 재활용성을 높임
• 코드의 가독성을 높여주어 유지보수를 쉽게함
• 두가지의 확장자 지원(.scss/ .sass)

👀 sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

 

👀 scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

차이점

1. 문법
   • { }; 의 유무 scss에서는 {};를 사용함
   • 확장자
   • 보통 scss가 더 많이 사용됨
2. 확장자

예제로 scss를 해봤는데요

css랑은 조금 다른 문법

• $blue: #228be6 
• lighten() darken() 같은건 없었는데 조금 다르네요

요거를 예제로 열심히 공부 해보겠습니다 !!!

👀  버튼 사이즈 조정하기

이런식으로

- className에 CSS 클래스 이름을 동적으로 넣어주고 싶을때 (className={['Button', size].join(' ')} 또는

- className={'Button ${size}'}

 

하지만 이렇게 보다 classNames 라는 라이브러리를 사용하는게? 더 편하다!

classNames - 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 손쉽게 문자열을 조합 할 수 있음

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
classNames(['foo', 'bar']); // => 'foo bar'

// 동시에 여러개의 타입으로 받아올 수 도 있습니다.
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// false, null, 0, undefined 는 무시됩니다.
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

 

scss 살펴보기

여기 보시면

.Button {
  &.large {

  }
} //이거랑

.Button.large {

} //이거랑 같다~

 

결국, Button 과 large CSS 클래스가 함께 적용되어 있으면 우리가 원하는 스타일을 적용하겠다는 것을 의미.

 

랜더링 해주면 화면에 이렇게 뜨네요 근데 small이 기본보다 크네

 

마지막에 이걸 추가하는데

난생 처음봅니다 이런건 ㅋㅋ

& + & = .Button + .Button이라고 하네요... 그래서 여백을 준거랑 같아서 저렇게 바뀌네요

---

 

👀  버튼 색상 설정하기

이렇게 하면 색마다 하나하나 코드를 쳐줘야 해서 이런식으로 하면 코드가 깔끔해집니다 !

 

이런식으로 렌더링까지 해주면 이렇게 색을 설정 할 수 있습니다

위에서 처럼 버튼 간격도 떼줬습니다

---

👀  outline 옵션 만들기

outline을 props로 받아와서 렌더링 해주면 outline이 생기게 됩니다.

👀  전체 너비 차지하는 옵션

근데 이게 예제 따라하다가 발견한건데 defaultProps로 color: blue를 해놨단 말이죠

근데 default가 파란색이 아니라 저렇게 연한 회색으로 뜨더라고요

음.. 원인을 찾아보니까

❓defaultProps x 함수에서 바로 정의

이거 전에 했던 스터디에서도 했던건데 여기서도 이거 때문!!

 

이거 대신에 -> 함수에서 바로 선언을 해야 합니다

이렇게 했더니 파란색이 잘 떠요

---

👀  ...rest props 전달하기

이제 버튼 컴포넌트에 onClick을 설정하려면??

 

spread와 rest사용하기

왼쪽처럼 하나하나 추가해주는 것보다 오른쪽처럼 ...rest를 사용하면 코드가 간결해집니다 !

• props에 지정하지 않은 값들을 rest라는 객체에 모아줌
• button태그에 {...rest}를 해주면 rest 객체안에 있는 값들을 모두 button태그에 설정해줌

이렇게 onClick을 설정하면 눌렀을때 콘솔이 뜨게 됩니다 !!

---

🔍  CSS Module

• CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있는 기술
• CRA로 만든 프로젝트에서 CSS Module를 사용 할 때에는 CSS 파일의 확장자를 .module.css로 설정
• 리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 모두 고유해짐
• className 을 설정 할 때에는 styles.Box 이렇게 import로 불러온 styles 객체 안에 있는 값을 참조해야 함

.Box {
  background: black;
  color: white;
  padding: 2rem;
}

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

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

export default Box;

 

일반 CSS와 차이점

 

일반 CSS

/* styles.css */
.button {
  background-color: blue;
  color: white;
}


// App.jsx
import './styles.css';

function App() {
  return <button className="button">Click me</button>;
}

 

- 다른 파일에서도 같은 이름의 클래스가 있으면 스타일 충돌이 발생

 

CSS Module

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

// App.jsx
import styles from './Button.module.css';

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

 

이렇게 하면 고유의 해시값을 포함한 이름으로 바뀝니다 !! => 중복 안일어남

 

이제 예제로 공부를 해볼건데 ~

 

이렇게 체크박스 컴포넌트를 만들어 렌더링 해주면

이렇게 되는데 체크박스나 "체크됨/안됨" 텍스트를 누르면 check상태가 변함 => 해당 공간을 label태그로 감싸서

어쨌든 이 예제로 공부를 해보자!!!

 

Checkbox 컴포넌트 Md머시기 써서 만들고 렌더링 해주고

이런식으로 고유한 클래스 이름이 만들어짐 !

styles.icon 이렇게 객체안에 있는 값을 조회해야하는데 이름에 -가 들어가 있다면? :

• styles['my-class'] 이렇게 사용!
• 여러개가 있다면? ${styles.one} ${styles.two}
• 조건부 스타일링 : ${styles.one} ${condition ? styles.two : ''}

이런식으로 classNames에 bind를 사용하면 cx('클래스이름')같은 형식으로 편하게 사용이 가능 !

• 여러개의 CSS 클래스를 사용해야 할때
• 조건부 스타일링을 해야 할때 

cx('one', 'two')
cx('my-component', {
  condition: true
})
cx('my-component', ['another', 'classnames'])

 

💁 기타 추가 내용

• CSS Module은 Sass에서도 사용 가능
• 확장자를 .module.scss로
• CSS Module을 사용하고 있는 파일에서 클래스 이름 고유화 x 전역적 클래스 이름을 사용하고 싶을때

:global .my-global-name {

}

//Sass

:global {
  .my-global-name {

  }
}

 

• CSS Module 을 사용하지 않는 곳에서 특정 클래스에서만 고유 이름을 만들어서 사용하고 싶을때

:local .make-this-local {

}

//Sass

:local {
  .make-this-local {

  }
}

 

---

🔍  styled- components : CSS in JS

Tagged Template Literal

• Template Literal 
  • `으로 감싸야 함 
  • ${} 안에 변수, 연산식, 함수 호출 등 다양한 표현을 넣을 수 있음

const name = "상래";
const age = 22;

// 기존 방식
console.log("안녕하세요, 제 이름은 " + name + "이고, 나이는 " + age + "살입니다.");

// Template Literal
console.log(`안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}살입니다.`);

 

 

• Tagged Template Literal
  • Template Literal 앞에 함수 이름을 붙임
  • 그 함수가 문자열과 표현식을 분리해서 직접 처리 가능
  • tagFunction`문자열 ${표현식1} 또 다른 문자열 ${표현식2}`

function emphasize(strings, ...values) {
	// strings: 문자열 배열
 	// values: ${}로 들어온 값들
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `**${values[i]}**` : "");
  }, "");
}

const name = "상래";
const age = 22;

const result = emphasize`안녕하세요, ${name}! 당신은 ${age}살입니다.`;
console.log(result);
// 출력: 안녕하세요, **상래**! 당신은 **22**살입니다.

 

++ 이런 문법을 사용하기도 함

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

 

이제 예제를 보면서 해보겠습니다 

왼쪽문법을 사용해서 해줬어요

 

color를 props로 주면 색을 컴포넌트를 사용하면서 바꿀 수 있다~

이렇게 huge라는거에 크기를 설정해서 쓰면 크기도 커지네요

음 솔직히 처음 보는거라 좀 어려워요;;

근데 이렇게 여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 css를 사용해야 한다는데...

그래야 그 스타일 내부에서도 다른 props를 조회 할 수 있다는데... 허허 어렵다

---

👀  Button 만들기

여기 부턴 styled-components 단종이슈로 Emotion으로 할게요 문법은 같으니까..

@emotion/react @emotion/styled를 설치/import 해주고 렌더링 해줬습니다. - 버튼 2개 만들어봤어요

문법이 같아서 잘 작동합니다!!

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

Sass를 사용 할 때 lighten() 이나 darken() 같은 함수를 사용했는데 CSS in JS에서도 polished라이브러리를 사용하면 됨

이렇게 라이브러리를 사용하면

:hover를 사용했기 때문에 마우스 커서를 가져가면 화면이 흐려지고 클릭하면 어두워지게 됨

 

ThemeProvider : emotion/styled-components 로 만드는 컴포넌트에서 조회/사용 가능하게 설정

 

이렇게 theme객체 안에 palette객체로 선언을 해놓고 거기서 선택해주면

이렇게 잘 된다 !

 

• color를 지정하지말고 받아서 사용하도록
• defaultprops가 잘 안되서 예제랑 조금 다르게 ??연산자를 사용 => 기본값 지정됨
• +근데 여기서 그 & + & 가 안먹는데 왜인지는 모르겠네요 :not거나 인라인 스타일로 해결은 가능합니다

const colorStyles = css`
  ${({ theme, color }) => {
    const selected = theme.palette[color];
    return css`
      background: ${selected};
      &:hover {
        background: ${lighten(0.1, selected)};
      }
      &:active {
        background: ${darken(0.1, selected)};
      }
    `;
  }}
`;

원래는 이렇게 색상관련 코드를 분리해서 사용 할 수

 

이렇게 해봤는데요

const colorStyles = css`
  ${({ theme, color }) => {
    const selected = theme.palette[color];
    return css`
      background: ${selected};
      &:hover {
        background: ${lighten(0.1, selected)};
      }
      &:active {
        background: ${darken(0.1, selected)};
      }
    `;
  }}
`;

원래 예제는 이거였는데 이게 계속 에러가 나서

const colorStyles = ({ theme, color }) => {
  const selected = theme?.palette?.[color] ?? "#228be6";
  return css`
    background: ${selected};
    &:hover {
      background: ${lighten(0.1, selected)};
    }
    &:active {
      background: ${darken(0.1, selected)};
    }
  `;
};

이렇게 했어요 gpt말로는

css\`` 안에 함수를 넣고, 또 그 함수 안에서 props`를 쓰고 있어서 문법이 꼬여 있었던 거예요.

`css`` 안에서는 바로 스타일 문자열을 써야지, JS 함수 자체를 넣으면 안 됩니다.

라네요 한 수 배웠습니다;

 

잘 되네요

❓엄 근데 size가 작동을 안해요;;;;;

그래서 얘도 함수로 바꿔줬는데 => 이번엔 간격이 작동 안함

대환장 파티 ㅋㅋ 그래도 한거에 의미를 두겠습니다 + 뒤에 outline이랑 fullWidth는 하는 방법이 같으니 넘어갈게요 ㅎ

---

👀  Dialog 만들기

Dialog 컴포넌트 만들고 랜더링

조금 다르지만 성공~

onConfirm,onCancel,visible을 prpos로 주고 useState로 onClick처리 했습니다.

이제 삭제버튼 누르면 dialog가 뜨게 된다 !

👀  트랜지션 구현하기

transform을 주고요

 

하면 dialog가 뜰때/내려갈때 다 트렌지션이 생기게 됩니다..

 

이렇게 끝인데요 뭔가 새로운건데 내용이 좀 많아서 다시 천천히 봐볼게요