오늘은 JSX에 대해서 알아보도록 하자.
create-react-app으로 만든 리액트 파일의 App.js파일을 열어보면, 기본 설정이 다음과 같다.
(리액트 파일을 만드는 방식은 다음에 포스팅하도록 하겠다. 이 포스팅은 리액트 파일을 만들 수 있다는 전제 하에 설명할 예정)
import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
import React from 'react';이 코드는 리액트를 불러와서 사용할 수 있도록 해준다.
리액트 프로젝트를 만들 때, node_modules이라는 디렉터리도 함께 생성이 되는데,
프로젝트 생성 과정에서 node_modules에 react모듈이 설치된다.
그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다.
이렇게 모듈을 불러와서 사용하는 것은 사실 브라우저에 없는 기능이었다.
브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있도록 Node.js에서 지원해준다.
이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용한다.
파일을 묶듯이 연결하는 것이다.
대표적인 번들러로 웹팩, Parcel, browserify등의 도구들이 있다.
리액트에서는 주로 웹팩을 사용한다.
번들러 도구를 사용하면 import모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다.
App.js에는 다음과 같은 import 코드가 있다.
import logo from "./logo.svg";
import "./App.css";이렇게 파일을 불러오는 것은 웹팩의 로더loader라는 기능이 담당한다.
로더는 여러 가지 종류가 있는데, css-loader는 CSS파일을 블러올 수 있게 해주고,
file-loader는 미디어 파일이나 웹 폰트를 불러올 수 있도록 해준다.
하단의 코드는 App이라는 컴포넌트를 만들어 준다.
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;프로젝트에서 컴포넌트를 렌더링하면(보여주면) 함수에서 반환하고 있는 내용을 나타낸다.
마치 HTML과 같지만, HTML은 아니다. 이와 같은 코드를 JSX라고 부른다.
JSX는 자바스크립트의 확장 문법이다.
이와 같은 형식으로 작성한 코드가 브라우저에서 실행되기 전에 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
JSX를 사용하면 편하게 UI를 랜더링할 수 있다.
JSX의 몇 가지 규칙
단, 몇 가지 규칙이 있는데 해당 규칙은 다음과 같다.
1) 컴포넌트에 여러 요소가 있다면, 반드시 부모 요소 하나로 감싸야 한다.
function App() {
return (
<div>
<p>안녕</p>
<h1>안녕안녕</h1>
</div>
);
}
export default App;<p>태그와 <h1>태그를 <div>등의 부모 요소 하나로 감싸야 한다는 것이다.
버츄얼 돔에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록, 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야 한다는 규칙이 있기 때문이다.
2) 자바스크립트 표현식을 JSX에서 작성하고 싶다면, 내부에서 {}로 코드를 감싸면 된다.
function App() {
const name = "리액트";
return (
<div>
<p>{name}안녕</p>
<h2>잘 작동하니</h2>
</div>
);
}
export default App;
3)JSX 내부의 표현식에서 if문을 사용할 수 없기 때문에
조건 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용해 사전에 값을 설정하거나,
{ } 안에 조건부 연산자(삼항 연산자)를 사용하면 된다.
function App() {
const name = "리액트";
return (
<div>
{name === "리액트" ? <h1>리액트입니다.</h1> : <h2>리액트가 아닙니다.</h2>}
</div>
);
}
export default App;
4)AND연산자(&&)를 사용한 조건부 렌더링도 가능하다.
특정 조건을 만족할 때 보여주고, 만족하지 않을 때 아무것도 렌더링 하지 않는 상황에서 사용한다.
function App() {
const name = "뤼액트";
return <div>{name === "리액트" ? <h1>리액트입니다.</h1> : null}</div>;
}
export default App;혹은 &&연산자를 활용하여 더 짧게 표현할 수도 있다.
function App() {
const name = "리액트";
return <div>{name === "리액트" && <h1>리액트입니다.</h1>}</div>;
}
export default App;
5)또한, 리액트 컴포넌트 함수에서 undefined만 반환하여 렌더링하면 오류를 발생시킨다.
다음과 같은 코드는 오류를 발생시킨다.
function App() {
const name = undefined;
return name;
}
export default App;따라서 어떤 값이 undefined일 수 있다면, OR연산자를 사용하기로 한다.
function App() {
const name = undefined;
return name || "값이 undefined입니다.";
}
export default App;(단, JSX내부에서 undefined를 렌더링하는 것은 괜찮다.)
6) 또한 리액트에서 돔 요소에 스타일을 적용할 때는, 문자 형태로 넣는 것이 아니라 객체 형태로 넣어주어야 한다.
따라서 스타일 이름 중 background-color처럼 -문자가 포함되는 이름이 있다면, backgroundColor 카멜 표기법으로 작성해야 한다.
7) 또한 HTML처럼 class라고 표기하는 것이 아니라, className이라고 설정해주어야 한다.
8) HTML에서는 <input>등의 태그는 닫지 않아도 되었지만, JSX에서는 <input></input>이라고 입력해야 한다.
단, 태그 사이에 별도의 내용이 들어가지 않는다면 <input />이라고 적기만 해도 된다. 이와 같은 태그를 self-closing태그라고 부른다.
9) 주석의 경우도 {/*(주석 내용 적기)*/} 이 안에 적어주어야 한다.
ESLint와 Prettier
ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구이다.
잘못 입력한 것을 바로잡기 쉬우니 설치를 권한다.
