[리액트를 다루는 기술] 2장 JSX

2.1 코드 이해하기

import React from 'react';

• 위 코드는 리액트를 불러와서 (import) 사용할 수 있게 해 주는 코드입니다.
• 리액트 프로젝트 제작 시 node_moudles 디렉터리 생성됨 → 이 디렉터리 안에 있는 react 모듈을 설치합니다.

모듈을 불러와서 사용하기는 브라우저에는 없던 기능입니다.

→ 브라우저에서도 사용하기 위해 **번들러(bunlder)**를 사용합니다. (Node.js에서 지원합니다.)

 

번들러 (bundler)

• 종류: 웹팩, Parcel, browserify 등
• 이 중, 리액트에서는 웹팩을 사용합니다.

import(or require)로 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다.

최적화 과정에서 여러 개의 파일로 분리할 수 있습니다.

• 본 프로젝트에서는 src/index.js를 시작으로 필요한 파일을 모두 불러와서 번들링합니다.

import logo from './logo.svg'
import './App.css'

웹팩 사용 시 SVG, CSS 파일도 불러와서 사용할 수 있습니다.

위처럼 불러오는 기능은 웹팩의 **로더(loader)**라는 기능이 담당합니다.

로더 (loader)

• file-loader: 웹 폰트, 미디어 파일 등을 불러올 수 있게 해 줍니다.
• babel-loader: 자바스크립트 파일을 불러 옴, 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 통해 ES5 문법으로 변환해 줍니다.
• css-loader: CSS 파일을 불러올 수 있게 해 줍니다.
• 웹팩 로더는 직접 설치하고 설정해야 하지만, 리액트 프로젝트 제작 시 사용한 create-react-app이 작업을 대신 해 줍니다. 이와 관련된 커스터마이징은 추후 언급할 예정입니다.

컴포넌트

프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

function App() {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<p>
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

위 코드는 APP이라는 컴포넌트를 만들어 주며, function 키워드를 사용하여 만든 컴포넌트를 함수형 컴포넌트라고 부릅니다.

컴포넌트를 렌더링하면 (보여 주면) 함수에서 반환하는 내용을 나타냅니다.

HTML과 유사하지만, 본 코드를 JSX라고 부릅니다.

 

2.2 JSX란?

JXS

자바스크립트의 확장 문법이며, XML과 비슷하게 생겼습니다.

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

 

변환 전 JSX 코드

function App() {
	return(
		<div>
			<Hello <b>react</b>
		</div>
	);
}

변환 후 JS 코드

function App() {
	return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

JXS를 사용하면 UI를 편하게 렌더링할 수 있다는 장점이 있습니다. 장점은 2.3에서 이어서 이야기하겠습니다.

 

2.3 JSX의 장점

보기 쉽고 익숙하다

HTML 코드와 비교했을 때 더 가독성이 높고 작성하기도 쉽습니다.

더욱 높은 활용도

<div>, <span> 등의 태그를 사용할 수 있습니다.

앞으로 만들 컴포넌트도 작성할 수 있습니다. (ex. App.js 에서 만든 App 컴포넌트)

src/index.js 를 보면 자세히 확인이 가능합니다.

 

src/index.js

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

2.4 JSX 문법

JSX를 사용하기 위해서는 총 8가지의 규칙을 준수하여야 합니다.

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다
2. JSX에서 자바스크립트 표현식을 사용하려면 코드를 { } 로 감싸야 한다
3. if문을 사용하려면 JSX 밖에서 if문을 사용하거나, { } 안에 조건부 연산자를 사용하면 된다
4. AND 연산자(&&)를 사용하여 조건부로 렌더링할 수 있다
5. undefined만을 반환하여 렌더링하지 않는다 (단, JSX 내부에서 렌더링하는 것은 가능)
6. DOM 요소에 스타일을 적용할 때는 객체 형태로 넣어 주어야 한다
7. javascript의 class == JSX의 className (대문자에 유의)
8. 태그를 꼭 닫아 주어야 한다
9. 주석은 {/* /} 형태로 작성한다 (//, / 등은 그대로 노출됨)

이 중, 몇 가지 규칙에 대해서 더 자세히 알아보도록 하겠습니다.

 

1. 감싸인 요소

import React from 'react';

function App() {
	return (
		<div>
			<h1> 리액트 안녕! </h1>
			<h2> 잘 작동하니? </h2>
		</div>
		);
}

export defalut App;

div 대신 fragment 기능도 사용 가능하며, line 1을 import React, { Fragment } ~로 수정하면 됩니다.

또는 <div> 위치의 코드를 <>로만 변경하여도 표현 가능합니다.

 

3. 조건부 연산자

조건부 연산자의 또 다른 이름은 삼항 연산자이며, === 으로 표현합니다.

 

5. undefined를 렌더링하지 않기

undefined만을 반환해야 한다면, OR(||) 연산자를 사용하여 대신 사용할 값을 지정해 줍니다.

 

6. 인라인 스타일링

const style = {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

위와 같이 style 객체를 선언하고 div의 style 값으로 지정해 주는 것도 가능하며, 바로 style 값을 지정하는 것도 가능합니다.

2.5 ESLint와 Prettier 적용하기

ESLint

문법 검사 도구로, 코드를 작성할 때 실수를 하면, 에러 또는 경고 메시지를 에디터에서 바로 확인할 수 있게 해 줍니다.

ex. <a>의 닫는 태그를 사용하지 않은 경우 위와 같이 오류 메시지를 에디터에서 보여 줍니다.

Prettier

VS Code에서 F1을 누르고 format이라 입력한 후, 엔터 키를 누르면 들여쓰기가 자동으로 정렬됩니다.

Prettier 사용 전 / Prettier로 정렬한 후

 

2.6 정리

Q1. 리액트에서 사용하는 번들러의 이름은?

Quiz 2~4. 빈칸을 채우시오.

Q2. JSX는 (     )되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

Q3. JSX에서는 (     )만 반환하여 렌더링하면 안 된다.

Q4. JSX에서 class 대신 (     )를 사용한다.

 

1. 웹팩

2. 번들링

3. undefined

4. className

 

 

Corner React Starter #1

Editor PEEP