JSX

목차

1. 바벨
2. 웹팩
3. jsx
4. jsx 문법
5. EsLint, Prettier

1. 바벨

우리가 CRA(create-react-app)을 통해 리액트 프로젝트를 설치를 하게 되면 여러 개의 파일들이 생성되고 npm start를 누르게 되면 실행이 됩니다.

하지만 우리 브라우저 환경에서는 모듈을 불러와서 사용하게 되는 것은 없는 기능입니다. 하지만 우리가 리액트 프로젝트를 다운 받는 과정에서 바벨이 브라우저에서 모듈을 사용할 수 있게 해줍니다.

추가적으로 우리가 다운 받은 바벨은 jsx를 포함, 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정합니다. ( 바벨은 IE와 같은 옛날 브라우저 환경에서도 실행될 수 있도록 최신문법을 구문법을 바꿔주는 기능도 수행하고 있습니다. )

2. 웹팩

웹 개발을 하다보면 다양한 확장자 파일을 만들게 되는데 이런 다양한 소스들은 웹 어플리케이션을 무겁게 만듭니다. 그리고 통신이 있을 때 마다 이 소스를 모두 다운로드 받아 쓴다는 것은 굉장히 부담스럽습니다.

이를 해결하기 위해 등장한 도구가 Bundler(번들러)입니다. 대표적인 도구로는 WebPack, Parcel, browserify라는 도구가 있으며 우리는 이 중 WebPack에 대해 간단히 알아 볼 예정이다.

특히 우리는 이 웹팩의 css-loader, babel-loader 등을 통해서 여러 개의 css파일과 js 파일을 하나의 js파일로 압축해서 만들 수 있다.

3. JSX

자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 따라서 가독성이 매우 좋고 보기 편하다는 장점이 있습니다.

React 프로젝트에서 JSX파일은 바벨에 의해서 JS문법으로 바뀌어 실행되고 있습니다.

부록

React.StrictMode란?
리액트 프로젝트에서 리액트의 레거시 기능을 사용하지 못하게 하는 기능입니다.
예) 문자열 ref, componentWillMount 등 나중에는 완전히 사라지는 기능들 => 사용 시 경고
'

4. JSX 문법

1) 감싸인 문법

리액트에서는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

2) 자바스크립트 표현

JSX 코드 내부에 {} 를 쓰면 자바스크립트를 사용할 수 있다.

3) if문 대신 조건부 연산자

if 문 대신 조건문 연산자 ... ? ... : ...를 사용할 수 있습니다.
jsx에서는 if 문법을 사용할 수 없습니다.

4) 조건부 렌더링

특정 조건을 만족할 때 내용을 보여주고, 그러지 않을 때는 아무 것도 보여주고 싶지 않을 때 사용

AND(&&) 연산자 를 통해서 가능하다.

인라인 스타일링

<div style = {{display : "none", backgroundColor : "green" }}>

className

jsx에서는 class 대신 className을 사용한다.

5. ESLint, Prettier

ESLint

문법 검사 도구

Prettier

코드 스타일 자동 정리 도구

우리는 간단하게 VS code 에디터 확장판을 다운로드 받아서 사용 가능하지만 사용자 커스텀 설정 또한 가능하다.

그리고 협업 시작 시 서로의 코드를 잘 볼 수 있게 ESLint와 Prettier 설정을 잘 맞추어야한다. 이는 개인적으로 중요하다고 생각되어 개인 블로그에서 설정법 및 사용법을 따로 다루어 볼 예정이다.