[React] Bundler와 JSX에 대해 알아보자

리액트 공부를 시작할 때 필수적으로 보이는 두 단어가 있다. 바로 Bundler와 JSX!

이 두 가지가 무엇인지, 어떻게 쓰이는지 간단하게 정리해보았다.

 

 

번들러(Bundler)

이전의 자바스크립트 : 페이지별, 기능별 등으로 자바스크립트 파일을 분리해 HTML파일에서 <script> 형식으로 불러왔다.

프로젝트 규모가 작을 경우 큰 문제 없지만, 규모가 커질수록 몇 가지 치명적인 문제가 발생한다.

 

1. 두 개의 자바스크립트 파일에서 같은 변수명을 사용할 경우, 해당 변수명의 용도가 불분명해질 수 있다. 자바스크립트 파일이 얼마 없을 경우 겹치지 않게 개발하면 되지만, 프로젝트 규모가 커진다면...? 일일이 확인하고 변수명을 고치기란 꽤나 머리 아픈 일이다.

2. 사용자가 URI를 입력하면 해당 URI에 필요한 파일을 서버에서 불러오게 된다. 이 애플리케이션에 필요한 파일이 많을수록 파일 로딩 시간이 매우 길어지게 된다.

 

위와 같은 문제점을 해결하기 위해 등장한 것이 바로 번들러!

 

 

번들러란? 간단히 말하면 여러 개의 파일을 묶어주는 역할을 한다.

번들러는 자바스크립트 뿐만 아니라 애플리케이션에 필요한 모든 파일을 모듈 단위로 나눠 최소한의 파일묶음으로 만든다.

또한, 최신 문법의 자바스크립트 파일을 모든 웹 브라우저에서 실행 가능하도록 하기 위해 ES5 문법으로 변환하는 작업도 한다.

 

이러한 번들러의 종류는 다양하다. 각 프로젝트의 용도에 맞게 선택하여 적용하면 된다.

번들러의 종류

 

 

 

JSX

자바스크립트에서 확장된 문법이다.

브라우저에서 실행되기 전 번들링되는 과정에서 일반 자바스크립트 문법으로 변환된다.

 

그렇다면 얘도 자바스크립트 문법이 맞나 ?

NO! 리액트 개발 시 사용되기 때문에 공식적인 문법이라고는 할 수 없다.

 

 

JSX의 문법 특징을 몇 가지 살펴보자.

1. 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 한다.
2. 내부에서 코드를 { }로 감싼다면 자바스크립트 표현식을 사용할 수 있다.
3. 내부에서 자바스크립트 if문을 사용할 수는 없으나, 필요하다면 { } 안에서 조건부 연산자를 사용할 수 있다.
4. AND(&&) OR(||)을 사용할 수 있다.
5. 리액트 컴포넌트에선 undefined를 반환하면 안 된다. 정녕 꼭 사용하고 싶다면 JSX 내부, { } 안에서 렌더링하는 것은 괜찮다. 혹은 OR을 사용하여 undefined일 경우 출력될 문자를 입력해보자.