[도서] 리액트를 다루는 기술 #JSX

 

 

 

2.1 코드 이해하기

 

 

- import 구문, 이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능이다.

- 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능

- Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.

- 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundle)은 묶은 다는 뜻으로 파일을 묶듯이 연결하는 것

- 대표적인 번들러로 웹팩, Parcel, browserify라는 도구들이 있으며 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세인데 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다.

- 번들러 도구를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해준다. 또한 최적화 과정에서 여러 개의 파일로 분리될 수도 있다.

- 2017년부터는 브라우저에서도 import 구문을 사용할 수 있게 되었지만, 이는 단순히 다른 경로에 있는 자바스크립트를 불러오는 용도로만 사용되기 때문에 프로젝트 번들링과는 다르다.

- 웹팩을 사용하면 SVG파일과 CSS파일도 불러와서 사용할 수 있으며, 이렇게 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당한다.

- css-loader는 CSS 파일을 불러올 수 있게 해주고 file-loader는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다. babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5문법으로 변환해준다.

 

 

 

2.2 JSX란?

 

 

- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.

- 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

 

2.3 JSX의 장점

 

 

1️⃣ 보기 쉽고 익숙하다

 

- HTML 코드를 작성하는 것과 비슷해 가독성이 높고 작성하기도 쉽다

 

 

2️⃣ 더욱 높은 활용도

 

- div나 span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있다.

 

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
    	<App/>
    </React.StrictMode>
);

reportWebVitals();

 

 

- React.StrictMode 컴포넌트는 리액트 프로젝트에서 앞으로 사라질 레거시 기능을 사용할 때 경고를 주고 앞으로 미래의 리액트 버전에 도입될 기능들이 정상적으로 호환될 수 있도록 유도하는 개발환경에서만 활성화되는 디버깅용 컴포넌트이다.

- reportWebVitals는 웹 성능을 측정하는 도구

 

 

 

2.4 JSX 문법

 

import {Fragment} from "react";

function App(){
	return(
    	<Fragment>
        	<h1>안녕</h1>
            <h2>테스트</h2>
        </Fragment>
    )
}

export default App;

 

 

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

- div 요소를 사용하고 싶지 않을 경우 리액트 v16 이상부터 도입된 Fragment 라는 기능을 사용하면 된다.

 

 

<>
	<h1>안녕</h1>
    <h2>테스트</h2>
</>

 

 

- 위와 같은 형태로도 표현할 수 있다.

 

 

 

1️⃣ 자바스크립트 표현

 

function APP(){
	const name = "리액트";
    return(
    	<>
        	<h1>{name}안녕</h1>
            <h2>테스트</h2>
        </>
    )
}

 

 

- JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.

- 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 된다.

 

 

2️⃣ undefined를 렌더링하지 않기

 

- 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다.

 

 

3️⃣ 꼭 닫아야 하는 태그

 

<input/>

 

- 태그 사이세 별도의 내용이 들어가지 않는 경우에는 위와 같이 작성할 수 있으며 self-closing 태그라고 부른다.

 

 

2.5 ESLint와 Prettier 적용하기

 

 

1️⃣ ESLint

 

- ESLint는 문법 검사 도구이고 Prettier는 코드 스타일 자동 정리 도구이다.

 

 

2️⃣ Prettier

 

- VS Code에서 F1을 누르고 format이라고 입력한 다음 Enter를 누른다.

 

 

2.6 정리

 

- JSX는 HTML과 비슷하지만 완전히 똑같지는 않다.

- 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며 용도도 다르고 문법도 조금씩 차이가 난다.

 

 

 

#출처 : 리액트를 다루는 기술(저자 : 김민준 VELOPERT)