React - JSX

1. JSX의 한계

• JSX는 단 하나의 요소만 반환할 수 있다.

• 이 특성을 이용해 아래와 같은 방법들로 반환이 가능하다.

  • div태그로 묶어주기

  • 여러 복합 요소들을 리스트 형태로 넘겨주기

  • wrapper 컴포넌트 만들기

div 태그로 묶을 때는 아래와 같이 쓸모없는 div들을 많이 중첩하게 되기에 이상적이진 않다.

<div>
  <div>
  	<div>
     <h2>깊이가 3인 컴포넌트 내부로 들어가봤습니다.</h2>  
    </div> 
  </div>
</div>

*해결책

• wrapper컴포넌트로 의미를 알 수 있는 구조 만들어주기.

const Wrapper = props => {
    return props.children
}

export default Wrapper;

div 대신 Wrapper로 감싸주면된다.

• div는 실제로 돔에 출력되지만 Wrapper는 아니다.
• 왜냐하면, Wrapper은 props.children을 통해 내용만 가져오며 직접적으로 div와 내부의 요소들을 가져온게 아닌, 간접적으로 내부의 요소들만 Wrapper내부에 불러왔기 때문이다.
• 그러므로, 실제 Wrapper 컴포넌트는 존재하지 않았던 것처럼 DOM에서 사라진다.

<Wrapper> //실제로 DOM에 출력되지 않는 Wrapper 컴포넌트
  <div>
  	<div>
     <h2>깊이가 3인 컴포넌트 내부로 들어가봤습니다.</h2>  
    </div> 
  </div>
</Wrapper>

2. Vite

기존 webpack

• CRA(Create React App)는 Webpack 기반의 리액트 기본 보일러 플레이트(최소한의 변경으로 여러 곳에서 재사용되는 기능 및 코드)이다.
• JS는 인터프리터 언어이기에 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을 이용하므로 앱 사이즈가 커져도 갱신 시간에 영향이 없다.