[MGS 3기 - 28일차] React 라이브러리 (1)

박철연·2022년 5월 19일
0

MGS STFE 3기

목록 보기
25/35

드디어 React와 사용되는 다양한 라이브러리에 대해 정리하고자 합니다. 오늘은 시간과 관련된 라이브러리와 스타일링 라이브러리를 요약했습니다.

시간/일자 라이브러리

Moment

moment.js는 자바스크립트에서 사용되는 날짜 관련 라이브러리 중 가장 많이 사용되었던 라이브러리입니다. 자바스크립트 기반이기 때문에 리액트와 함께 사용하는 것도 충분히 가능합니다.

물론 2011년을 기점으로 업데이트와 지원이 중단된 만큼, 실제 프로젝트에 자주 사용되지는 않는다는 것을 주의할 필요는 있겠습니다. (뒤에 다룰 시간 관련 라이브러리들이 훨씬 많이 사용됩니다.)

moment 설치

moment는 npm을 통해 설치할 수 있습니다.

$ npm install moment

설치를 성공적으로 마쳤다면, import 문법으로 moment를 들여온 다음 코드를 작성하면 됩니다.

import moment from "moment";

주요 사용법

현재 날짜와 시간은 다음과 같이 사용합니다. format 메서드를 활용해 인식하기 쉬운 형식으로 날짜 데이터를 다듬을 수도 있습니다.

let now = moment();
now.format(); // 2022-05-19T00:14:30+09:00

특정 날짜/시간은 다음의 코드처럼 객체에 담아줄 수 있습니다.

let date = moment("2022-05-19");
date.format();	// 2022-05-19T00:14:00+09:00
let date = moment("2022.05.19", "YYYY.MM.DD");
date.format();	// 2022-05-19T00:14:00+09:00
let date = moment("05/19/22", "MM/DD/YY");
date.format();	// 2022-05-19T00:14:00+09:00
let date = moment("2022-05-19 10:30:25", "YYYY-MM-DD HH:mm:ss");
date.format();	// 2022-05-19T10:30:25+09:00

위에서 언급한 format 메서드도 얼마든지 커스터마이징할 수 있습니다.

let now = moment();
now.format();	// 2022-05-19T00:14:45+09:00
now.format("YY-MM-DD");	// 22-05-19
now.format("DD/MM/YY");	// 19/05/22
now.format("YYYY.MM.DD HH:mm:ss");	// 2022.05.19 00:14:45

date-fns

date-fns 는 많은 JavaScript 날짜 관련 라이브러리 중 Tree shaking을 지원하고 Functional Pattern 으로 동작하는 라이브러리입니다.

date-fns 설치

moment와 마찬가지로 npm으로 설치하면 되겠습니다. 또한 date-fns도 moment.js나 day.js 처럼 date-fns 모듈 객체를 불러와서 사용이 가능합니다.

자체적으로 tree-shaking을 지원하기 때문에, CDN의 형식보다는 import 문법으로 들여오는 것이 불필요한 메모리 낭비를 줄일 수 있습니다.

// date-fns의 add만 들어있는 date-fns/add 에서 add 사용
import add from "date-fns/add";	
// date-fns의 모든 함수가 들어있는 date-fns 에서 add 사용
import { add } from "date-fns";
// 자체적으로 add 함수 만들어서 사용
const add = require("date-fns/add");

기본적인 사용법은 다음과 같습니다.

const dateFns = require("date-fns");

let date1 = new Date("2022-05-19");
console.log(date1); // Thu May 19 2022 09:00:00 GMT+0900 (한국 표준시)

let date2 = add(date1, { days: 1 });
console.log(date2); // Thu May 19 2022 09:00:00 GMT+0900 (한국 표준시)

format은 다음과 같은 방식입니다. moment와 크게 다르지 않습니다.

import { format } from "date-fns";

var date = new Date("2021-10-11 10:30:25"); // Mon Oct 11 2021 10:30:25 GMT+0900 (한국 표준시)

format(date, "yy-MM-dd"); // 22-05-19
format(date, "dd/MM/yy"); // 19/05/22
format(date, "yyyy.MM.dd HH:mm:ss"); // 2022.05.19 14:30:25

시간을 다루기 위해 다양한 내장 함수를 제공하는데, "get시간단위()" 함수를 사용하여 날짜 객체에서 원하는 시간 단위의 값을 구할 수 있습니다.

또한 "set시간단위()" 함수를 사용하여 날짜 객체에서 원하는 시간 단위의 값을 변경할 수 있습니다.

해당 함수들을 사용할 때에는 import를 통해 date-fns 객체에서 일치하는 함수를 불러와줘야 합니다.

import { getYear, setMonth, format } from "date-fns";

let date = new Date("2022-05-19 10:30:25.495"); // Thu May 19 2022 10:30:25 GMT+0900 (한국 표준시)

getYear(date); // 2022 (년)
format(setMonth(date, 11), "yyyy-MM-dd HH:mm:ss.SSS"); // 2022-05-11 10:30:25.495

day.js

day.js 는 JavaScript 날짜/시간 관련 라이브러리중 가장 용량이 작은 라이브러리입니다.

업데이트가 중단된 moment.js 보다 약 33배 가벼우며, immutable 한 구조라서 굉장히 많이 사용되고 있는 라이브러리 입니다.

시간/일자에 대한 부분이 서비스에서 큰 비중을 차지하는 경우가 많지 않고, 그렇다고 해서 기능이 부실한 것도 아니기 때문에, moment.js의 대체 라이브러리로 널리 사용되고 있습니다.

day.js 설치

다른 라이브러리들과 마찬가지로, npm으로 설치 후 import 문법으로 프로젝트에 들여올 수 있습니다.

import dayjs from "dayjs";

day.js 사용법

dayjs() 함수를 사용해 현재 날짜와 시간 객체를 생성할 수 있습니다.

let now = dayjs();
now.format(); 

또한 dayjs 함수를 통해 날짜와 시간을 특정할 수도 있습니다.

let date = dayjs("2022-05-19");
date.format(); // 2022-05-19T00:00:00+09:00
let date = dayjs("2022.05.19", "YYYY.MM.DD");
date.format(); // 2022-05-19T00:00:00+09:00
let date = dayjs("05/19/22", "MM/DD/YY");
date.format(); // 2022-05-19T00:00:00+09:00
let date = dayjs("2022-05-19 10:30:25", "YYYY-MM-DD HH:mm:ss");
date.format(); // 2022-05-19T10:30:25+09:00

dayjs는 date fns와 moment와 문법이 매우 흡사합니다. 따라서 get(), set(), add() 등의 메서드와 format은 다른 라이브러리와 신택스를 공유합니다.

스타일링 라이브러리

styled-components

CSS in JS

styled-components는 대표적인 리액트 스타일링 라이브러리이자, CSS in JS 라이브러리입니다.

CSS in JS는 스타일을 정의하는 코드를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 직접 삽입하는 방법론입니다.

컴포넌트 기반의 프로그래밍이 주류가 되면서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript을 모두 작성하는 패턴이 많이 사용되고 있습니다.

React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS in JS 라이브러리를 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있게 됩니다.

styled-components 설치 및 사용

Styled Components는 styled-components라는 npm 패키지명을으로 설치할 수 있습니다.

$ npm i styled-components

styled-components는 다음과 같은 기본 문법을 가집니다.

import styled from "styled-components";

styled.button`
  // 모든 <button> HTML 엘리먼트에 대한 스타일 적용
`;

먼저 설치된 패키지에서 styled라는 이름으로 import를 한 뒤, styled.선택자의 형식으로 스타일링 코드를 작성하는 식입니다.

주의할 것은 백틱으로 css 코드를 감싸준다는 것입니다. 일반 따옴표가 아닙니다.

styled-components에서는 다음과 같이 미리 정의된 컴포넌트를 불러올 수도 있습니다.

import styled from "styled-components";
import Button from "./Button";

styled(Button)`
  // <Button> React 컴포넌트에 스타일 정의
`;

실제 styled-components를 다루는 방식은 다음 예시 코드를 보면 이해가 빠를 것입니다.

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  backgroud: white;
`;

function Button({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

styled-components 문법을 준수하여, StyledButton이라는 새로운 컴포넌트를 만들어 냈습니다. 이를 js 파일 내의 Button이라는 컴포넌트 안에 담아주었습니다.

따라서 다른 문서에서 위 코드의 Button 컴포넌트를 import 한다면 작성한 css 코드가 모두 적용된 컴포넌트를 화면에 그리게 될 것입니다.

emotion

emotion 소개

emotion도 앞서 소개한 styled-components와 마찬가지로 CSS in Js 방식의 스타일링 라이브러리입니다.

차이점을 언급하자면, styled component 사용방식과 css prop 기능을 지원하여 확장에 용이합니다. 따라서 React와 Styled-components 사용법을 이미 알고 있다면 진입 장벽이 매우 낮습니다.

또한 SSR 페이지 구축 시 서버 측 작업이 필요없기 때문에, 많은 프로젝트에서 사용되는 스타일링 라이브러리입니다.

emotion 설치 및 사용

설치 및 사용법은 학습 내용을 고려하여 react와 함께 사용하는 상황을 가정하고 정리해보았습니다.

다음과 같은 명령어로 설치할 수 있습니다.

npm i @emotion/css
npm i @emotion/react

//styled-components와 유사한 방식의 사용을 위한 패키지 설치
npm i @emotion/styled

js 파일에 다음의 import 문법을 사용하여 import 할 수 있습니다.

import { css, jsx } from "@emotion/react";

아래의 예시 코드는 styled-components와 유사한 방식으로 emotion을 사용한 코드입니다.

import { css, jsx } from '@emotion/react'

const divStyle = css`
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  padding: 32px;
  text-align: center;
  &:hover {
    color: white;
  }
`

export default function App() {
  return <div css={divStyle}>Hover to change color.</div>}

styled-components와 문법적으로 매우 흡사합니다. 그러나 css라는 내장 객체를 import하여, 스타일링의 결과를 직접적으로 컴포넌트에 주입하는 것이 아니라 html 태그 내에 속성값으로 부여하는 형식임을 알 수 있습니다.

* styled-components와 emotion에 대한 내용은 프로젝트를 통해 더 상세하게 다룰 예정입니다.

profile
Frontend Developer

0개의 댓글