220624.md

React!

1. Children Prop

• div 태그로 감싸 리액트 컴포넌트를 전달해주는게 기본적이다.

• 하지만 박스의 역할을 하는 Sidebar, Card, Box, Dialog 등은 모두 각각의 컴포넌트 틀 및 스타일, 기능을 가지고 있다.

• 그렇게 div의 역할을 대신해 감싸주는 wrapper의 역할을 하는 컴포넌트가 children prop이다.

• 그렇게 다양하게 재사용할 수 있는 여지를 줍니다. ul태그가 꼭 필요한 li태그들은 Category라는 아래의 wrapper컴포넌트를 생성하면 재사용성과 코드의 가독성이 증가한다.

const Category = (props) => {
  return <ul>{props.children}</ul>;
};


const App = () => (
  <Category>
      <li>리스트 입니다!</li>
      <li>리스트 입니다!</li>
      <li>리스트 입니다!</li>
      <li>리스트 입니다!</li>
      <li>리스트 입니다!</li>
  </Category>
);

2. JSX

• JSX는 리액트에서 사용하는 UI를 정의할 때 사용하는 도구다.
• JSX는 HTML 문법과도 같은 형태를 가졌지만 실제로는 JavaScript로써 export되는 동작 방식을 가지고 있다.
• 이는 브라우저에서 번들링되는 과정에서 Babel을 사용해 일반 JS 문법으로 변환해준다.
  • 번들링이란? 기능별로 모듈화했던 JavaScript 파일을 묶어주는 작업
  • 번들러에 대하여 => 웹팩(Webpack)과 같은 번들러의 주 역할은 서로 연관(의존성) 있는 여러 JS파일(모듈)들을 하나의 번들(Bundle) 파일로 묶어주는 역할을 한다.
    • Webpack을 이용한 Bundling 작업 덕분에 한 파일(CSR의 가장 큰 특징)에서 모두 묶어 요청/응답을 받으므로 네트워크 코스트가 줄어든다
    • Webpack의 주요 구성 요소 중 하나인 로더(Loder)가 일부 브라우저에서 지원이 되지 않는 ES6 형식의 자바스크립트 파일을 ES5로 변환하여 사용가능하게 한다. 즉, 고전의 브라우저까지 모두 호환할 수 있도록 돕는 아주 효자스러운 기능을 가졌다.

예제

import React from 'react';

return React.createElement('div', {}, 
			React.createElement('h2', {}, "Let's get JSX!"),
            React.createElement(Expenses, {item: expenses}, "Let's get JSX2!") //Expenses는 컴포넌트
            )

return (
	<div>
      <h2>Let's get JSX!</h2>
      <Expenses items={expenses}/>
    </div>
)

• 위의 1과 2는 완전한 동치이다.

• 두 코드의 차이점은 2번은 React를 직접 가져오지 않아도 되는데 내부적으로는 1번과 같이 동작하고 있다.

• 위의 return React.createElement 구문을 보면 반환은 오직 하나의 div 태그이고 내부적으로 계속해서 하위 태그들을 만들어내는 것을 볼 수 있다. 이러한 이유로 return은 오직 한 개만 반환하기에 div로 감싸주는 것 이다.

• 그리고 1번과 같이 사용하기 위해서는 React를 명시적으로 import해서 사용해야만한다.

즉, 보이지 않았겠지만, 내부에서는 React가 JSX를 사용할 때 항상 동작하고 있었다는 것을 의미한다. 왜 div와 같은 wrapper 태그가 필요했는지 이제야 이해할 수 있을 것이다.

3. Vite

기존 webpack

• CRA(Create React App)는 Webpack 기반의 리액트 기본 보일러 플레이트(최소한의 변경으로 여러 곳에서 재사용되는 기능 및 코드)이다.
• JS기반으로 만들어진 wepback은 인터프리터 언어이기에 low-level 인 Go 언어보다 느릴 수 밖에 없다.
• HMR(Hot Module Replacement) 사용 => 프로젝트 전체를 다시 로드하지 않고, 변경 부분만 교환, 추가, 제거하는 방식

Vite

• Webpack이 아닌 매우 빠른 Go 언어를 기반으로한 EsBuild 자바스크립트 빌드 툴을 사용
• vite는 자바스크립트 파일을 두 개로 나눠 빌드한다.
  • 개발하는 동안 바뀌지 않는 의존성(dependencies) ex) node_modules폴더
    • 라이브러리 설치 등 바뀌는 시점마다 매번 번들링을 해놔서 크기가 매우 큰 node_modules 폴더가 하나의 js파일로 합쳐지는 번들링에 시간을 잡아먹지 않음.
    • webpack은 브라우저 요청 이전에 모든 파일을 번들링해 하나로 모으지만, vite는 이 node_modules라는 의존성 폴더만 미리 esbuild를 이용해 빠르게 번들링함.
  • 소스코드
    • 자주 수정됨
    • 소스코드 전체가 동시에 로드되지 않아도 된다.

**방식의 차이

• webpack

  • 기존에는 dev server 즉, 빌드 시작 시에 webpack이 모든 자바스크립트를 한 곳에 모아 번들링 한 후에 브라우저에 하나의 파일을 던져주는 방식이었음.

• vite는 Native ESM 즉, 자바스크립트 공식 모듈을 사용해 브라우저에서 필요한 소스코드만을 요청해 받아오는 방식을 사용한다.

  • Webpack은 소스코드를 업데이트하면 새로이 번들링을 진행한다. HMR을 사용하더라도 앱 사이즈가 커지면 무거워진 하나의 파일은 선형적으로 갱신 시간이 증가한다.
  • Vite는 하나로 묶는 과정이 없이 브라우저가 교체된 모듈만을 요청해 가져오는 방식으로 HMR을 이용하므로 앱 사이즈가 커져도 갱신 시간에 영향이 없다.