[새싹x코딩온] 웹 퍼블리싱 과정 13주차 - 2 | map, style 적용 방법, SASS

map

배열 데이터를 좀 더 효율적으로 그리기 위해서 map을 사용한다.

{배열.map((요소, 인덱스) => {
	return <div key={인덱스}>{요소}</div>;
})}

div 같은 태그가 아닌 만들어준 컴포넌트와 함께 사용할 수도 있다.

 

key

• 기존 요소와 업데이트 요소를 비교하는 데 사용되는 속성이다.
• 다른 요소와 겹치지 않는 고유한 값이어야 한다.
• key는 고유한 값을 가져야 하기 때문에 배열의 요소 중 고유한 값(id 등)이 존재하지 않는다면 index로 사용해도 된다.

 

style 적용 방법

inline style 적용

object 형태의 css 스타일을 만들어서 style 속성에 object를 대입한다.

→ 불편함이 많아 실제로는 잘 사용되지 않는다.

 

css 파일을 만들고 적용하기

css 파일은 반드시 src 폴더 내부에 생성해야 한다.

css 파일을 link 걸고 싶은 컴포넌트에 link가 아닌 import를 걸어주면 된다.

→ css 파일은 전역적으로 적용이 되기 때문에 컴포넌트 단위의 리액트에서는 적절하지 않다.

 

css-module

• 리액트 내장 기능을 사용하는 것이다.
• 이름.module.css 형식으로 파일을 생성한다.
• 클래스 이름에 해시값을 넣어서 만들어 준다.

 

CSS-module 사용 방법

적용할 파일에 import style from '../styles/style.module.css' 라고 작성해 import 한다.

태그 속성을 className={이름.클래스이름}으로 설정한다.

 

클래스 여러 개 지정하는 방법

1. 템플릿 리터럴 사용

      <div className={`${style.first} ${style.second}`}>

        클래스 여러 개 지정하는 방법 1

      </div>

 

2. join() 함수 이용

      <div className={[style.first, style.second].join(" ")}>

        클래스 여러 개 지정하는 방법 2

      </div>

 

3. classnames 모듈 설치

터미널에 npm install classnames을 입력해서 모듈을 설치한다.

적용할 파일에 import Names from 'classnames/bind' 라고 작성해 import 한다.

// 앞의 style을 빼기 위해서 bind 메소드를 사용해 style을 미리 받아올 수 있다.

const setting = Names.bind(style);

{/* 실제로 사용할 때는 문자열로 클래스 이름만 나열하면 된다. */}

<div className={setting("first", "second")}>

  클래스 여러 개 지정하는 방법 3

</div>

 

Styled Components

리액트는 컴포넌트 단위가 중심이기 때문에 css 파일을 따로 만들기 보다는 style 태그처럼 개별 컴포넌트에만 스타일을 적용하고자 하는 요구가 많아졌다.

 

Styled Components 사용 방법

styled components는 리액트의 기본 기능이 아니기 때문에 설치가 필요하다.

적용할 파일에 import styled from "styled-components" 라고 작성해 import 한다.

 

내가 만든 H4Title이라는 태그는 h4태그임을 알리고

      <H4Title>styled-component 이용</H4Title>

 

백틱 안에 원래 해당 태그에 적용하고 싶은 css문법을 작성하면 된다.

  const H4Title = styled.h4`

    color: #333;

    background-color: yellowgreen;

  `;

 

실제로 html 개발자도구를 열어보면 알 수 없는 클래스들이 적용되어 있다.

styled components는 html 태그의 class명을 기반으로 작동하며 클래스의 이름은 임의로 생성된다.

 

확장프로그램 설치

vscode-styled-components 확장프로그램

위 확장프로그램을 설치하면 색 설정 시 색상이 나오고 자동완성도 된다.

 

SASS

Syntactically Awesome Style Sheets

Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 에러가 발생활 확률히 적다. 따라서 대부분의 사용자들이 SCSS문법을 사용하고 있다.

 

scss를 사용하려면 터미널에 npm inastall sass 작성하여 모듈을 설치해야 한다.

 

import

import를 통해서 다른 scss 파일을 가져올 수 있다.

적용할 파일에 @import "경로/파일이름" 작성한다.

파일이름을 "_파일이름"으로 작성하면 부분 파일이 된다.

 

Nesting

{}를 사용해서 요소간의 상하 관계를 나타낼 수 있다.

.div1 {

  width: 100%;

  height: 50vh;

  background-color: red;

  .div2 {

    width: 80%;

    height: 50%;

    background-color: orange;

    box-shadow: inset $boxShadow;

    .div3 {

      width: 80%;

      height: 50%;

      box-shadow: $boxShadow;

      background-color: yellow;

    }

  }

}

.div1 > .div2 > .div3

 

&을 사용하면 자기 자신을 선택하게 된다.

  .btn {

    width: 180px;

    height: 70px;

    border-radius: 15px;

    box-shadow: $boxShadow;

    line-height: 70px;

    color: #fff;

    text-align: center;

    font-size: 23px;

    letter-spacing: 3px;

    &.orangered {

      background-color: orangered;

    }

 

    &:hover {

      color: yellow;

      font-weight: 700;

    }

  }

 

변수($)

$를 사용해서 변수를 지정할 수 있다.

 

@mixin

JS의 객체처럼 속성값들을 저장하여 사용

@mix 선언을 하면 같은 스타일을 여러 번 반복해서 사용할 수 있다.

함수를 선언하는 것처럼 사용하면 된다.

@mixin 이름(){}
# 매개변수가 없으면 소괄호는 생략이 가능하다.
# 중괄호 내부에는 사용할 css스타일을 작성하면 된다.

 

함수처럼 매개변수 제공

@mixin 선언

@mixin 사용

 

기본값 설정 가능

실수로 에러가 발생하는 것을 막기 위해 기본값 설정이 가능하다.

 

@for문

스타일을 반복적으로 출력하고싶을 때 사용한다.

@for $i from 1 to 5{}
# 1~4까지 값을 반복한다.

@for $i from 1 through 5{}
# 1~5까지의 값을 반복한다.

 

nth-child(n), nth-of-type(n) 등 숫자가 늘어나는 곳에 유용하게 쓰일 수 있다.

    @for $i from 1 to 4 {

      &nth:child(#{$i}) {

        width: (80px + 20px * $i);

      }

    }

 

@each

@each $변수 in $배열{}

index() 메소드로 index 값을 구할 수 있다.

 

@if

특정 조건에 따라서 속성을 변경하고 싶을 때 사용한다.