[2024 React.js 스터디] 정호용 #6주차 "React.JS 꾸미기"

오메 일주일이 후딱 갑니다... 정신없는 요즘..

01. Sass

Sass(Syntactically Awesome Style Sheets)란... CSS 전처리기로서, 

1. 복잡한 작업을 쉽게

2. 코드의 재활용성 향상

3. 코드의 가독성 향상

을 지원하여 유지보수를 용이하게 해 주는!

문법적으로 짱 멋진 스타일시트라고 한다.

 

Sass는 두 가지 확장자(.scss/ .sass)를 지원한다. 이 두 가지의 문법은 아주 다르다던데..

 

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

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

sass

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

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

scss

 

이 코드만 보기에는 큰 차이가 없어 보인다. 아무튼, 이 강좌에서는 scss를 다룬다고 한다.

 

새롭게 리액트 프로젝트를 만들어 보자.

만들고 나서, node-sass라는 라이브러리를 설치해 주자.

빌드 에러가 뜨긴 했지만 일단 해보자.

컴포넌트 디렉터리 생성 후에 Button.js를 만들어 준다.

 

동일 디렉터리에 Button.scss파일도 생성해 주는데, 인텔리제이 기준으로 파일 생성 > 스타일시트로 들어가면 scss 확장자가 있다.

위와 같이 작성해 주면 된다. 기존 css와 다른 점은 $blue: #228be6;과 같이 스타일 파일에서 쓸 수 있는 변수를 선언할 수도 있고, lighten(), darken() 과 같이 색상의 밝기를 조절하는 함수도 쓸 수 있다.

 

기존 App.css를 App.scss로 바꾸고, 위와 같이 내용을 바꿔보자.

ㅇㄴ.. 실행이 안 된다.

 

 

우선 여기를 참고해 봤다.

https://velog.io/@nine9/Node.js-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%9B%84-node-sass-%EC%98%A4%EB%A5%98

Node.js 업데이트 후 node-sass 오류

 

내 node는 v20이다. 즉, node-sass를 7이상을 설치해야 되나 보다.

아니었다.....애초에 위에서 본 sass설치할 때의 에러가 그대로 떴다.

sass 설치에 문제가 있었나보다..

보통 node 버전의 문제라는데..

일단 스킵.

02. CSS Module

css module을 사용하면, css 클래스가 중첩되는 것을 완벽히 방지할 수 있다고 한다. 또한, className을 설정할 때는 import로 불러온 styles 객체 안에 있는 값을 참조해야 한다. 클래스 이름에 대해 고유한 이름들이 만들어 지기 때문에, 실수로 CSS 클래스 이름이 관계없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일이 없다.

css 모듈은 다음과 같은 상황에 쓰면 유용하다

1. 레거시 프로젝트에 리액트 도입 시 -> 기존 css 클래스명과 중복되어도 스타일이 꼬이지 않게 해준다.

2. css클래스 네이밍규칙을 만들기 귀찮을 때

 

또 다른 리액트 프로젝트를 만들어 준다.

CheckBox.js	App.js

실행해 준다.

잘 실행된다. 텍스트 부분을 선택했을 때 값이 바뀌는 이유는 label 태그로 감싸줬기 떄문이다.

 

이제 react-icons라는 라이브러리를 설치해 준다.

이걸 설치하면 여러 아이콘들을 불러올 수 있다.

 

Checkbox.js 를 수정해 보자

이제 텍스트 대신 아이콘이 나타나게 된다.

 

이제 컴포넌트를 스타일링 해 보자.

CSS Module작성 시에는 이름이 중복될 걱정을 할 필요가 없다!

 

이제 CheckBox.js에서 수정을 해 보자

 

이제 실행을 해 보자.

 

classnames 라이브러리의 bind기능을 써 보자

yarn add classnames로 설치해 준다.

 

CheckBox.js를 아래와 같이 수정해 준다.

 

bind기능을 쓰면, cx('클래스명')과 같이 편하게 쓸 수 있다. 여러 개의 CSS 클래스를 쓰거나, 조건부 스타일링 시에 매우 편하다.

 

03. styled-components

이번에 볼 기술은 CSS in JS라는 기술이다. 즉, JS안에 CSS를 작성하는 것이다. styled-components는 CSS in JS 관련 라이브러리 중 가장 인기있는 라이브러리이다. 

 

Tagged Template Literal?

const name = 'react';
const message = `hello ${name}`;

console.log(message);
// "hello react"

이건 Template Literal이다. 문자열 조합을 쉽게 해 준다.

 

만약 우리가 ${} 안에

1. 일반 문자열/ 숫자가 아닌 객체를 넣는 경우

2. 함수를 넣는 경우

3. Template Literal을 쓰면서도, 그 내부에 넣은 자바스크립트 값을 조회하고 싶은 경우

 

Tagged Template Literal 문법을 쓸 수 있다.

 

styled-components 사용하기

새 프로젝트를 만들어 준다. 그리고 styled-components를 설치해 준다.

 

 

App.js를 수정해 주고 yarn start를 이용해 실행해 본다.

이제 파란 원을 적용해 보자.

 

 

이번에는 버튼을 만들어 보자.

components 폴더를 만들고, Buttons.js라는 파일을 만든다.

이제, 이를 App.js에서 사용해 보자.

 

이제 실행해 보자

 

버튼 글자가 위로 올라간 이유는 잘 모르겠다. border나 margin 속성에서 top이나 bottom을 딱히 건들지 않았는데...

아무튼 이번에는 polished의 스타일 관련 유틸 함수를 사용해 보자. sass에서 darken, lighten함수르 사용해서 색상에 변화를 줬듯이, 여기서도 polished라는 유틸함수를 이용해서 쓸 수 있다.

 

위 명령어로 설치해 준다.

 

이후에, polished를 import하고, sass때와 비슷하게 써 주면 된다.

 

커서를 올렸을 때	커서를 올리지 않았을 때

이제 핑크색 버튼들을 만들어 보자.

Button.js에서 색상코드를 선언하는 대신, ThemeProvider라는 기능을 이용해 보고자 한다.

이를 이용해서 styled-components로 만드는 모든 컴포넌트에서 조회해서 쓸 수 있다.

 

이렇게 app.js에서 theme를 설정하면 styled-components로 만든 컴포넌트에서 palette를 조회하여 사용할 수 있다.

 

styled-components에서 props.theme로 조회할 수 있다.

이걸 약간 바꿔보자

 

지금은 기본 색상이 파란색이다.

 

이제 회색, 핑크색 버튼을 app.js에서 렌더링 해보자.

 

버튼들이 잘 나타난다.

버튼 박스가 오른쪽으로 치우쳐져 보이는 것은 캡쳐 영역 설정 때문이다. 실제로는 중앙에 잘 나온다.