React 컴포넌트 라이브러리 관련

React

공식 가이드 문서 (https://react.dev/)

https://react-ko.dev/learn

빠른시작

1. Creating and nesting components / 컴포넌트 생성 및 중첩하기

• react app은 컴포넌트(자신의 로직과 모양을 가진 UI의 조각, 대문자로 시작)로 만들어짐
• React 컴포넌트는 마크업을 반환하는 JavaScript 함수
• React 컴포넌트는 대문자로 시작

2. Writing markup with JSX / JSX로 마트업 작성하기

• JSX : react에서 사용하는 html 문법
• html보다 엄격 (
  과 같이 꼭 닫아줘야 함, 여러개읜 JSX 태그 반환 X)
• html -> jsx 변환기 : https://transform.tools/html-to-jsx

3. Adding styles

• className 속성 == html의 class 속성, 별도 CSS 파일 작성
• React는 CSS 파일을 추가하는 방법을 규정하지 않습니다.

4. Displaying data

• ex: {user.name}

5. Conditional rendering / 조건부 렌더링

• if문, ? 연산자, 논리 && 구문을 사용하여 조건부로 JSX를 포함할 수 있음

6. Rendering lists / 목록 렌더링

• for loop 및 배열 map() 함수와 같은 JavaScript 기능을 사용하여 반복 배열 반환
• li에 key 속성 주의

7. Responding to events

• onClick={handleClick} : 끝에 () 없음 주의, 이벤트 핸들러를 단지 전달만하면 됨

8. Updating the screen

• React의 useState 임포트하여 사용

9. Using Hooks

• use로 시작하는 함수를 훅(Hook)이라고 함
• useState: React에서 제공하는 빌트인 훅

10. Sharing data between components

• 부모->자식 컴포넌트에 값 전달 props, 컴포넌트 자신이 가지고 있는 값 state
• React 컴포넌트는 서로 통신하기 위해 props(객체,배열,함수 JXS를 포함한 모든 JavaScript 값 전달 가능)를 사용함

UI구성하기

• React 앱에서 모든 UI는 컴포넌트
• React 컴포넌트는 다음 몇가지를 제외하고는 일반적인 JavaScript 함수
  • 컴포넌트의 이름은 항상 대문자로 시작
  • JSX 마크업 반환
• 컴포넌트 import 및 export
• 컴포넌트 순수성 유지 : 자신의 일만 처리(호출 전 존재했던 객체나 변수 변경 X), 동일 입력/출력(순수 함수는 동일한 입력이 주어지면 항상 동일한 결과 반환)

Vite

자바스크립트 네이티브 모듈을 기반으로 한 데브 서버
웹팩보다 빠르게 개발, 배포 가능

• 번들링
  • 모듈번들러로 웹팩 많이 사용 함
• ESM(자바스크립트 네이티브 모듈)

Stitches

프레임워크에 구애받지 X : @stitches/core
styled API를 포함한 React wrapper : @stitches/react

• https://stitches.dev/
• styled-components와 유사한 api를 가진 css-in-js라이브러리이지만 near-zero runtime을 표방 함(runtime을 아예 가지지 않는건 아니지만, component prop에 의한 interpolation을 최소화하는 방향의 API 제공)
• styled-components에서는 props에 의한 완전한 동적 스타일링이 가능하지만, stitches는 사전에 정의한 variants에 의한 스타일링만 가능
• production build에서는 CSSOM수정 방식 선택, development mode에서는 DOM수정 방식 선택

Key Features

https://stitches.dev/docs/introduction#key-features
Variants https://stitches.dev/docs/variants
Toekns
Theming
Utils
Responsive Variants
Overrides
Developer Experience

API

https://stitches.dev/docs/api

• styled
  • styles 와 variants 를 포함한 컴포넌트를 만드는 기능
• css
  • 스타일 객체에서 classname을 생성하는 함수
• globalCSS
  • 글로벌리셋과 같은 글로벌 CSS 스타일을 작성할때 사용
• keyframes
  • global CSS @keyframe rule을 작성할때 사용
• defaultThemeMap
  • 기본 테마 속성값 import 하여 사용 가능
• createStitches
  • Stitches 환경설정시 사용
  • default theme tokens, custom utilities, media queries, prefix 등 추가 시 사용
• theme
• createTheme
• Styled object (CSS지만 JavaScript 객체로 작성)
• $$ : 로컬범위 토큰, 스타일 개체 앞에 2달러 기호($$)를 붙여 직접 토큰을 만들 수 있습니다.
• $ : scale-prefixed 토큰
• As Prop : 렌더링된 요소 변경

TypeScript

https://stitches.dev/docs/typescript

공식 가이드 문서 (https://react.dev/)

https://react-ko.dev/learn

빠른시작

1. Creating and nesting components / 컴포넌트 생성 및 중첩하기

• react app은 컴포넌트(자신의 로직과 모양을 가진 UI의 조각, 대문자로 시작)로 만들어짐

스타일 작성 법

1. CSS

단점

• Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제
• Dependencies: css 간의 의존관계를 관리하기 힘든 문제
• Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제
• Minification: 클래스 이름의 최소화 문제
• Sharing Constants: JS 코드와 상태 값을 공유할 수 없는 문제
• Non-deterministic Resolution: CSS 로드 순서에 따라 스타일 우선 순위가 달라지는 문제
• Isolation: CSS와 JS가 분리된 탓에 상속에 따른 격리가 어려운 문제

CSS의 단점을 해결하기 위해 CSS-in-CSS 방식의 CSS Modules 와 CSS-in-JS 방식을 사용한다.

2. CSS-in-CSS

• pure CSS와 마찬가지로 전체 페이지에 필요한 CSS를 처음부터 전부 로딩하여 style 태그를 생성함

• 장점

  • 빌드타임에서 CSS가 변환되므로 렌더링 시 추가 구문분석 필요없음
  • css 모듈에서 클래스명이 고유해짐으로 클래스명 중복 문제 해결함
  • css 파일이 따로 되어있어서 분업에 용이함

• 단점

  • 많은 각 CSS파일 유지보수 관리해야함

CSS 모듈
: CSS Module을 사용하면 CSS 파일에 선언한 클래스 이름들이 모두 고유해지기 때문에 Global namespace 문제를 해결할 수 있다.

CSS 전처리기(Preprocessor)
: Saas, Less, Stylus

css 프레임워크
: tailwind, bootstrap 등

3. CSS-in-JS

• 자바스크립트 코드에서 CSS 작성하는 방식, 이 방식으로 작성해 나온 결과물을 styled components 라고 이야기 함
• 컴포넌트 라이프 스타일에 맞게 스타일을 적용할 수 있기 때문에 동적 스타일 적용에 자유로움
• 특정 컴포넌트에 맞는 스타일이 종속되고, 해당 컴포넌트가 렌더링 될 때만 스타일 태그를 생성하기에 컴포넌트 기반의 프레임워크를 사용할 때 용이 함
• CSS파일을 따로 구분하지 않으며, 컴포넌트내에 전달되는 props에 따라 스타일링을 쉽게 적용 가능
• 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모아 코드를 작성하는 패턴
• React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있으며, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있다.
• styled-components, emotion 등 react 에서 사용 가능한 라이브러리
• 장점
  : 컴포넌트화 해서 추상화
  : 클래스명 작성 안해도 자동 생성해줘서 코드 경량화, 코드 가독성 좋음
  : JS 상태를 CSS에서 사용 가능
  : 현재 사용 중인 스타일만 DOM으로 출력됨
• 단점
  : 느린 인터랙션 - 상대적으로 CSS 모듈보다 느림. 렌더링마다 JS 안 CSS 로딩,파싱해야해서 속도가 느림
  : 라이브러리 설치해야하므로 번들 크기가 커짐

CSS-in-CSS vs CSS-in-JS

컴포넌트 위주의 프레임워크
CSS-in-CSS : 사용하지 않는 CSS 스타일 요소까지 로딩하기 때문에 비효율적이다.
CSS-in-JS : 필요한 컴포넌트 페이지의 CSS 스타일 요소만 로딩한다.

인터렉티브한 웹 사이트
CSS-in-CSS : 랜더링할 때 모든 CSS 스타일 요소를 로딩하기 때문에 컴포넌트 상태가 변하더라도 바로 적용이 가능하다.
CSS-in-JS : 상태 변경으로 인한 랜더링 때마다 JS 파일 내의 CSS 코드를 로딩 (파싱 등)해야하기 때문에 성능이 떨어질 수 있다. (컴포넌트 내 인터렉티브한 변화는 다를 수 있다)

콘텐츠가 많은 웹 사이트
콘텐츠가 많은 웹사이트의 경우 초기 랜더링 시간이 길어져버리면 유저가 불편함을 느낀다.
CSS-in-JS를 사용할 경우 라이브러리를 설치해야하기 때문에 번들링 크기가 커져 초기 구동 속도가 늦어질 수 있다.
이를 해결하기 위해 html이 먼저 렌더링 되는 서버사이드 랜더링을 사용한다고 해도 SSR를 위한 라이브러리를 설치해야하기 때문에 잘 고려해야한다.
서버사이드 렌더링인 nextjs는 9.3버전 부터 CSS Modules 를 권장한다.

react components 스타일링 하는 방법

https://legacy.reactjs.org/docs/faq-styling.html
React에서는 명확한 스타일링 가이드를 제공하지 않음, 의심이 되면 className 선언으로 스타일링 시작
https://www.geeksforgeeks.org/8-ways-to-style-react-components/
https://www.daleseo.com/react-styling/

1. inline css

인라인 스타일링에서는 기본적으로 스타일의 객체를 만듭니다. 그리고 React 기법을 사용하여 JSX 내부에 JavaScript 변수를 통합하는 스타일 속성의 구성요소 내부에 렌더링합니다('{ }' 사용)

// ex1
import React, { Component } from 'react'
 
class StudentList extends Component{
  render(){
    const {name, classNo, roll, addr} = this.props
    const ulStyle = {border: '2px solid green', width:'40%', listStyleType:'none'}
    const liStyle = {color : 'blue', fontSize:'23px'}
    return(
      <ul style={ulStyle}>
        <li style={liStyle}>Name : {name}</li>
        <li style={liStyle}>Class: {classNo}</li>
        <li style={liStyle}>Roll: {roll}</li>
        <li style={liStyle}>Address : {addr}</li>
      </ul>
    )
  }
}
 
export default StudentList

// ex2
import React,{ Component } from 'react'
import Ball from './Ball'
 
class Lottery extends Component{
  static defaultProps = {
    title : 'lotto',
    numbers : [1,2,3,4,5,6]
  }
 
  render(){
    const lotteryStyle={
      border: '2px solid grey',
      borderRadius: '10px',
      width:'40em',
      textAlign:'center',
      margin: '1em auto auto',
      padding: '1em 0 2em 0'
    }
    return(
      <div style={lotteryStyle}>
        <h3>{this.props.title}</h3>
        <div>
          {this.props.numbers.map(n => (
            <Ball num={n} />
          ))}
        </div>
      </div>
    )
  }
}
 
export default Lottery

2. normal css

각 구성 요소에 대한 외부 CSS 파일을 생성하고 필요한 클래스 스타일링

.StudentList{
    border: 2px solid green;
    width: 40%:
    list-style-type: none;
    }
 
.StudentList-details{
    color: blue;
    font-size: 23px;
    }

import React, { Component } from 'react'
 
class StudentList extends Component{
  render(){
    const {name, classNo, roll, addr} = this.props
    return(
      <ul className='StudentList'>
        <li className='StudentList-details'>Name : {name}</li>
        <li className='StudentList-details'>Class: {classNo}</li>
        <li className='StudentList-details'>Roll: {roll}</li>
        <li className='StudentList-details'>Address : {addr}</li>
      </ul>
    )
  }
}
 
export default StudentList

3. css module

CSS 모듈은 단순한 CSS 파일이지만 기본적으로 모든 클래스 이름을 가져올 때마다 CSS 모듈 내부의 애니메이션이 로컬로 범위가 지정되며 CSS 파일 이름은 'filename.module.css' 형식을 따라야 합니다. 이를 통해 응용 프로그램의 다른 클래스 이름과 충돌할 염려 없이 CSS 클래스에 유효한 이름을 사용할 수 있습니다.

.list{
    border: 2px solid green;
    width: 40%:
    list-style-type: none;
    }
 
.details{
    color: blue;
    font-size: 23px;
    }

import React, { Component } from 'react'
import style from './StudentList.module.css'
 
const StudentList = (props) => {
  const {name, classNo, roll, addr} = props
  return(
    <ul className={style.list}>
      <li className={style.details}>Name : {name}</li>
      <li className={style.details}>Class: {classNo}</li>
      <li className={style.details}>Roll: {roll}</li>
      <li className={style.details}>Address : {addr}</li>
    </ul>
  )
}
 
export default StudentList

4. css in js

import React, { Component } from 'react'
import {createUseStyles} from 'react-jss'
 
const styles = createUseStyles({
  student : {
    border : '2px solid green',
    width: '40%',
    listStyleType:'none'
  },
 
  studentDetails : {
    color : 'blue',
    fontSize : '23px'
  }
})
 
const StudentList = (props) => {
  const classes = styles()
  const {name, classNo, roll, addr} = props
  return(
    <ul className={classes.student}>
      <li className={classes.studentDetails}>Name : {name}</li>
      <li className={classes.studentDetails}>Class: {classNo}</li>
      <li className={classes.studentDetails}>Roll: {roll}</li>
      <li className={classes.studentDetails}>Address : {addr}</li>
    </ul>
  )
}
 
export default StudentList

5. styled components

스타일화된 구성 요소를 사용하면 JavaScript에서 생성된 변수 아래에서 CSS를 스타일화할 수 있습니다. style components는 이미 CSS 코드로 스타일이 지정되어 있고 주 구성 요소에 해당 스타일 구성 요소를 사용하는 JavaScript 변수로 구성 요소를 만들 수 있는 타사 패키지입니다. 스타일리시한 구성요소를 사용하면 유지 관리가 더 번거로울 수 있는 맞춤형 재사용 가능한 구성요소를 만들 수 있습니다.

import React, { Component } from 'react'
import styled from 'styled-components'
 
//styled component Li
const Li = styled.li`
  color : blue;
  font-size : 23px
`
 
//Styled component Ul
const Ul = styled.ul`
  border : 2px solid green;
  width: 40%;
  list-style-type:none
`
 
const StudentList = (props) => {
  const {name, classNo, roll, addr} = props
  return(
    <Ul>
      <Li>Name : {name}</Li>
      <Li>Class: {classNo}</Li>
      <Li>Roll: {roll}</Li>
      <Li>Address : {addr}</Li>
    </Ul>
  )
}
 
export default StudentList

6. saas & scss

&blue-shade: #264BC4;
&pale-green-color: #3CC27F;
 
.list{
    border: 2px solid &pale-green-color;
    width: 40%:
    list-style-type: none;
    }
 
.details{
    color: &blue-shade;
    font-size: 23px;
    }

import React, { Component } from 'react'
import './StudentList.scss'
 
const StudentList = (props) => {
  const {name, classNo, roll, addr} = props
  return(
    <ul className='list'>
      <li className='details'>Name : {name}</li>
      <li className='details'>Class: {classNo}</li>
      <li className='details'>Roll: {roll}</li>
      <li className='details'>Address : {addr}</li>
    </ul>
  )
}
 
export default StudentList

7. less

8. stylable

=> UI library는 5번 방향성 ?

CSS-in-JS 스타일링을 위한 라이브러리

https://npmtrends.com/@stitches/react-vs-emotion-vs-jss-vs-styled-components

• Styled Components

  • stylis (CSS preprocessor)를 사용하고 있음
  • 컴포넌트 기반 Framework에 최적화되어 있음
  • 런타임 CSS-in-JS는 단순하게 앱이 실행될 때 라이브러리가 스타일을 해석하고 적용하는 것을 의미
  • https://www.youtube.com/watch?v=j-JxASock0Q
    : 컴포넌트를 만드는 기술
    : 컴포넌트 안에 모든 요소를 넣다보니 css도 객체로 만들어줘야하는 이슈 발생->styled components 사용하면 우리가 알고있는 css 문법을 그대로 사용 가능
    : 스타일이 적용된 컴포넌트를 쉽게 만들 수 있음
    : 이미존재하는 컴포넌트를 랩핑하여 스타일이 적용된 새로운 컴포넌트 제작 가능하게 해줌

• Emotion

  • 런타임 CSS-in-JS는 단순하게 앱이 실행될 때 라이브러리가 스타일을 해석하고 적용하는 것을 의미
  • Material-UI v5 이후 버전부터 사용

• JSS

  • Framework 관계없이 사용가능
  • Material-UI v5 미만 버전에서 사용

• stitches

• Radium

  • inline style 방식
  • React에서 사용

Build a Custom React Component Library With Storybook 7 Beta and Vite 4 in 2023

https://betterprogramming.pub/build-a-custom-react-component-library-with-storybook-7-beta-and-vite-4-in-2023-c52db4d733c0