React

[새싹 프론트엔드] 7주차 - 3

ddorongg 2022. 11. 30. 15:41

컴포넌트 스타일링

리액트 컴포넌트 스타일링

스타일링 방식 설명
일반 CSS • 컴포넌트를 스타일링하는 가장 기본적인 방식
Sass • 자주 사용되는 CSS 전처리기(pre-processor) 중 하나
• 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성 할 수 있음
CSS Module • CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션
styled-components • 스타일을 자바스크립트 파일에 내장시키는 방식
• 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트 생성 가능 
- 잘 사용하지 않음

 

 

실습) 클래스 이름 작성의 중요성

 

Button1.js

 

Button1.css

 

Button2.js

 

Button2.css

 

 

실습) 클래스 이름 작성의 중요성

 

App.js

 

실행 결과

button2가 최종스타일이 되어버림 (button1을 덮음)

 

이름 생성 규칙

컴포넌트이름 - 클래스 형태

• 프로젝트 내 App.css

 

BEM 네이밍 방식

• Block, Element, Modifier

li class가 아니라 li className이라고 해야됨! (잘못된 자료)

 

                                              

BEM 네이밍 작성 규칙

언더바 2개 하이픈 2개를 제일 많이 사용

 

아이디는 달아주지 않음 클래스에다가만 붙이는 것이 규칙

 

장점: 가독성 좋음

단점: 이름 엄첨 김 , 코드 지저분해 보임

 

컴포넌트 내부에 있는 태그들한테 아이디 붙이는 거 안 됨. 리앧트에서는 태그에 아이디 붙이지 ㅇ낳음

컴포넌트들은 재사용가능하는데 내부에 아이디 붙여버리면 아이디의 유일성이 깨져버리는 상황이 생기기 때문 클래스로 제어해야함

 

Sass(Syntactically Awesome Style Sheets)

CSS의 단점

• 선택자(Selector)를 만들 때 매번 부모 요소 선택자를 넣어줘야 함

• 함수 기능 제공 안함

    - 중복되는 스타일 코드가 많음

    - 코드 양 증가로 유지보수가 어려움

 

Sass란?

• 문법적으로 매우 멋진 스타일시트를 의미

 

• 특징

    CSS 전처리기로 복잡한 작업을 쉽게 할 수 있음

    스타일 코드의 재활용성을 높임

    스타일 코드의 가독성을 높여서 유지 보수가 쉬움

    함수기능 제공

 

• 확장자

    • .scss  (최근에 나온 거라 이걸루 확장자 맞춰주기)

    • .sass

 

CSS 전처리기(Preprocessor)

scss 파일은 웹브라우저가 읽을 수가 없음 해석해서 스타일을 적용해줘야 하는데 브라우저는 해석할 능력이 없기 때문에 그래서 전처리기가 scss를 읽어서 일반 css로변환을 시켜줌  그럼 브라우저도 읽을 수 있음 compiler = 전처리기

따라서 컴파일러를 깔아야 한다 

 

.sass

부모자식 관계를 다 들여쓰기해야됨 하나라도 놓치면 원하는 스타일 안나옴,,,

 

.scss

두개의 확장자 제공하는데 scss가 최근에 나온걸로 바디에 괄호가 생겨서 들여쓰기 안 해도 됨

 

믹스인(mixin) 문법

믹스인(mixin)

재사용 가능한 기능을 만드는 방식

 

구분 선언 적용
.sass = +
.scss @mixin @include

 

믹스인(mixin)문법

 

Sass 설치

node-sass 라이브러리

• Sass를 CSS로 컴파일해주는 모듈

 

• 설치 명령어

유용한 VSCode 플러그인 설치

Compile Hero Pro

• SCSS 파일을 저장만하면 바로 CSS로 컴파일

 

SCSS 적용하기

실습) SCSS 적용

 

FirstScssComponent.js

 

FirstScssComponent.scss

달러기호 붙이면 변수 선언

 

SCSS 컴파일

css 파일 확인하기

• 프로젝트 폴더 → dist 폴더(자동생성) → style.css

 

• FirstScssComponent.css

 

실행 결과

 

Sass 문법

기본 문법

주석(Comment)

• 기존 CSS 주석에 한 줄 주석 추가

 

예)

 

기본 문법

데이터 종류(Data Types)

타입 설명 예시
Numbers 숫자형 1, .5, 10px 등
Strings 문자형 bold, “/images/a.png”, “dotum” 등
Colors 색상 표현 red, blue, green
#FFFF00
rgba(255,0,0,.5)
Booleans 논리형 true, false
Nulls 아무것도 없음, 컴파일 안함 null
Lists 공백이나 콤마(,)로 구분된 값의 목록 (apple, orange, banana)
apple orange banana
Maps Lists와 비슷. 값이 key:value 형태 (apple:a, orange:o, banana:b)

 

변수(Variable)

$ 기호와 변수명을 같이 사용

• 값 타입

  숫자, 문자열, 폰트, 색상, null, lists, maps

 

• 특징

  변수를 특정 선택자 안에서 선언하면 해당 선택자에서만 접근이 가능

 

 

실습) 변수 선언 및 적용

 

SecondScssComponent.js

 

SecondScssComponent

 

실행 결과

 

 

실습) 변수 유효 범위

 

ThirdScssComponent.js

 

실습) 변수 유효 범위

 

실행 결과

 

 

실습) !global

지역변수의 값을 전역변수의 값으로 바꿔치기 해놓은 것

 

실행결과

 

 

실습) !default

 

실행 결과

기존의 코드 실행하기 전에 컬러의 값이 이미 설정이 되어있으면 (primary-color: black)그 값을 따름 

내 값은 무시 기존의 값을 따름

남이 쓴 코드 복붙하고 싶으면 디폴트 사용

 

 

 

중첩(Nesting)

특정 선택자의 자식 또는 자손 선택자에 스타일을 적용하는 방식

 

NestingComponent.js

 

기존 CSS

 

scss 중첩

 

실행 결과

 

&(부모 선택자 참조)

ParentSelector.css

 

ParentSelector.scss

 

&(부모 선택자 참조) - 응용

ParentSelector2.js

 

실행 결과

 

연산자(Operations)

 

Operations.js

 

연산자(Operations) - 산술연산

Operations

 

실행 결과

 

나누기 연산 사용 조건

• 값 또는 그 일부가 변수에 저장되어 있는 경우

• 값 또는 그 일부가 함수에 의해 반환되는 경우

• 값이 ()로 묶여 있는 경우

• 값이 다른 산술 표현식의 일부로 사용되는 경우

 

 

실습) 나누기 연산

 

실행 결과

 

연산자(Operations) - 단위 연산

단위 연산

• 절대 단위(px) 연산

    - 산술 연산자 사용

 

• 상대 단위(%, em, vw 등) 연산

    - CSS의 calc() 함수로 연산

 

 

[실습회고]

sass를 이용하여 매개변수를 이용해 구현하는 것인데 나는 조금 방향을 잘 못 잡아서 중점을 이 상자의 반복을 어떻게 돌려야 하는 가를 막 엄청 고민하느라 시간을 많이 썼다는 것이다 ,,, 리액트로 for문 돌리는 거 자바스크립트 방식이랑 달라서 막 어케 할 지 고민하다가 선생님한테 여쭤보니까 그냥상자 만들어서 하는 거로 생각했다고 하셔서,,^^ 나도 그냥 만듬 ㅎ 그 와중에 50px씩 커진다는 건 알겠는데,,, 이거를 매개변수로 어떻게 주는 거람,,,, 그냥 +50px하면 절재 저렇게 안 나올텐데... 하면서 하다가 나는 sass의 매개변수 개념을 잘 이해하지 못한다는 것을 깨닫고 역시 설명을 한번 더 들었다 (수업자료의 예제가 좀  이해하기 어려웠던 것 같다) 그러고 결국 완성 난 언제 쯤 이 매커니즘을 주무를 수 있을 까 그치만 지금은 이해되서 다행이다 아무튼 sass 짱

 

@mixin title($size) {
  width: $size * 50px;
  height: $size * 50px;
  background-color: red;
}
.container4 {
  display: flex;
  flex-flow: row;
}

.box1 {
  @include title(1);
}
.box2 {
  @include title(2);
  background-color: orange;
}
.box3 {
  @include title(3);
  background-color: yellow;
}
.box4 {
  @include title(4);
  background-color: green;
}
.box5 {
  @include title(5);
  background-color: blue;
}
.box6 {
  @include title(6);
  background-color: navy;
}
.box7 {
  @include title(7);
  background-color: purple;
}

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅