[9주차] 4. 리액트 컴포넌트 스타일링

리액트 컴포넌트 스타일링

Sass

• 문법적으로 짱 멋진 스타일 시트
• 스타일시트의 재사용성, 코드 가독성 높여줌
• 반복되는 코드는 @mixin 활용
• 사용시 props 이름만 설정시 true 값을 갖는 것과 동일
• 라이브러리 설치
• yarn add node-sass로 node-sass 라이브러리 설치(프로젝트에서 sass 사용 가능해짐, sass로 작성된 코드로 css로 변환해주는 역할)
• classnames 라이브러리 : 조건부로 class name 적용시 굉장히 쉽게 가능, yarn add classnames
  • 문자열, 객체, 배열 등을 사용해서 다양한 옵션으로 조합해 classname으로 생성 가능
  • falsy한 값(false, null, 0, undefined) 무시
  • 사용 : 사용하려는 파일 상단에 import classNames from 'classnames'; 작성
• 변수 선언
• $변수이름 : 값;
• 주석 작성 : // 주석

확장자

• .sass : Sass가 처음 나왔을 때 사용한 확장자, 기존의 css 문법과 다른 점이 많음( 중괄호 없음, 세미콜론 사용x 등)
• .scss : css와 유사한 문법, Sass 사용시 많이 사용하는 확장자, .sass보다 .scss 확장자가 더 많이 쓰임

…rest props

• 모든 이벤트에 대해서 하나하나 컴포넌트에 설정해주는 게 귀찮을 때 사용
• 컴포넌트 파라미터로 중괄호 안에서 …rest는 app.js에서 작성한 props를 제외한 나머지 모두를 받아옴
• 컴포넌트 반환 값으로 쓰는 태그의 props로 {…rest}로 받아오는 것은 컴포넌트 파라미터로 받아온 중괄호 안에서 …rest 객체 안의 모든 것들을 그태그에게 설정해주겠다는 뜻
• 재사용이 높을수록 …rest와 함께 className도 넣어주면 좋다.

className이 겹치지 않게 작성하는 팁

• 1. 프로젝트에서 컴포넌트 이름을 고유하게 지정
• 2. 최상위 엘리먼트의 클래스 이름을 컴포넌트 이름과 동일하게(대문자로 설정)
• 3. 그 내부에서 sass 셀렉터 사용\

CSS Module

• css 클래스 이름 중복 방지 가능
• css 파일 이름을 .module.css로 끝내면 됨
• .module.scss 로도 사용 가능(사용전에 node-sass 라이브러리 설치해야 함)
• 사용하는 상황
  • 레거시 프로젝트에 리액트 도입하는 경우 : 어떤 프로젝트가 있고 일부 기능에 리액트 기능 도입할 때, 기존에 만들었던 CSS 클래스가 새로 만들 리액트 컴포넌트에 실수로 적용되는 것을 완벽하게 방지
• css 클래스 네이밍 규칙 만들기 귀찮을 경우(정하기 힘든 경우)
• css 모듈의 경우 프로젝트를 만들고 별도로 설치해야 할 라이브러리가 없다. 왜냐하면 create-react-app으로 만든 프로젝트에는 이미 적용이 되어 있기 때문이다.
• .module.css 사용할 js 상단에 import styles from ‘.module.css의 경로’;
  • styles 객체 안의 값을 조회하는 느낌으로 컴포넌트에서 사용
• classnames 라이브러리 설치 후 import classNames from 'classnames/bind'; 상단에 작성
  • 두개 이상의 class 이름 있을 경우 css 모듈 적용시 사용
  • bind는 css 모듈 사용시 조금 더 쉽게 사용할 수 있게 해주는 유틸
  • const cx =classNames.bind(styles);
  • cx를 기존에 classNames 함수 썼던 것처럼 작업
  • className={cx(‘클래스이름’, ‘클래스이름’, ‘클래스 이름’)}; cx 괄호안에 Boolean 값, 자바스크립트 값 등 넣기 나능
• css 모듈 내부에서 전역적으로 사용하고 싶은 경우(grobal class 이름 선언하고 싶을 경우)
  • 선언하고 싶은 클래스이름 앞에 :grobal 키워드 작성
  • scss 모듈의 경우 그 클래스 전체를 :grobal 중괄호로 감싸서 작성
• :local 키워드
• 일반 css 파일 내에서 클래스 이름 앞에 :local 키워드 작성시 특정 클래스를 css 모듈 형태로 사용 가능
• 일반 scss 파일 내에서 클래스를 :local 중괄호로 감쌀시 특정 클래스를 scss 모듈 형태로 사용 가능

Tips

• mac os나 리눅스의 경우 터미널에서 바로 code로 에디터를 키려면 VS Code > F1 > install code 쳐서 install code in command in PATH를 해줘야 함
• window에서 VS Code 터미널에서 yarn 실행 안될 경우 : https://choonse.com/2021/06/25/101/
• flex 잘 모를 경우 참조할만한 사이트 : https://flexboxfroggy.com/#ko
• rem 단위는 현재 브라우저 페이지 기본 폰트 사이즈에 기반하여 사이즈 조정됨, 기본폰트 사이즈 * rem 앞 숫자
• lighten 함수 : lighten(색상, 얼마나 밝게);
• darken 함수 : darken(색상, 얼마나 어둡게);
• js에서 자동완성으로 컴포넌트 불러오고 싶을 때 이름 치다가 ctrl + space 누르고 메뉴 뜨면 거기서 선택
• yarn add node-sass로 깔면 버전이 안맞아서 충돌나서 yarn add node-sass@4.14.0로 깔기
• yarn upgrade = npm update
• sass에서 &는 자기 자신 의미
• 색상 코드 참조 사이트 : https://yeun.github.io/open-color/
• react icons 라이브러리 : 오픈소스로 공개된 icon들을 쓸 수 있는(컴포넌트 형으로 쓸 수 있음) 라이브러리
  https://react-icons.github.io/react-icons/