[React]-JSX 문법

JSX?

JSX는 JavaScript XML의 줄임말입니다.  JSX는 React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법입니다.

JSX 컴파일 과정

JSX는 브라우저가 바로 실행할 수 있는 코드는 아닙니다. JSX로 작성된 코드를 브라우저가 이해할 수 있는 JavaScript 코드로 변환해주는 과정이 필요한데, 이 때 사용되는 것이 바로 Babel입니다. Babel은 JSX를 JavaScript 코드로 컴파일해주고 브라우저가 변환된 코드를 읽고 화면에 렌더링할 수 있게 해줍니다.

DOM과 React DOM

React에서는 DOM과 다르게 CSS, JSX 문법만으로 웹 애플리케이션 개발을 할 수 있습니다. 각각의 컴포넌트 구현을 위해 필요한 파일이 줄어들고, 한눈에 컴포넌트를 확인할 수 있죠. JSX를 활용하면 JavaScript만으로도 마크업 형태의 코드를 작성해 DOM에 배치할 수 있습니다.

JSX로 작성된 React 코드

그렇다면 JSX를 사용하면 좋은 점이 무엇일까요? JSX로 코드를 작성하면 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한 눈에 파악할 수 있다는 장점이 있습니다. 이렇게 구조와 동작에 대한 코드를 한 덩어리로 적은 코드셋을 컴포넌트라고 합니다.

컴포넌트 단위로 작성된 코드는 어플리케이션의 전체적인 구조와 기능이 어떻게 이루어져 있는지 파악하기 용이하게 만들어주고, 특히 UI 관련 작업을 할 때 시각적으로 더 도움을 줍니다.

 

* JSX를 사용하지 않고 React로 코드를 작성할 수는 없을까요?

    -JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡해지고 가독성이 떨어지는 단점이 있기 때문에 굳이 그럴 필요가 있을까 싶습니다.

1. JSX 기본 사용법

const name = "뉴비 개발자";
const element = <h1> Hello, {name} </h1>;

JSX에서 자바스크립트 표현식을 사용하고자 할 경우 꼭 중괄호를 사용해주어야 합니다.

위 코드에서는 name이라는 변수에 선언과 할당을 해준 뒤, 중괄호로 감싸서 JSX 문법으로 작성했습니다.

JSX의 중괄호 내부에는 유효한 모든 JavaScript 표현식을 사용할 수 있습니다.

2. 하나의 엘리먼트 안에 여러 개의 엘리먼트를 사용할 경우

JSX 문법에서는 여러 개의 엘리먼트를 사용하려면, 최상위에서 opening tag와 closing tag로 감싸주어야 합니다.

3. CSS 클래스를 지정하고자 할 경우

<div class="box">Hello!</div>
//HTML 클래스 속성 작성 방법

<div className="box">Hello!</div>
//JSX에서 클래스를 지정하는 방법

4. React 엘리먼트가 JSX로 작성될 경우

function hello() {
	return <div>Hello!</div>;
}
function HelloWorld() {
	return <hello />;
}
// 잘못된 사용법

function Hello() {
	return <div>Hello!</div>;
}
function HelloWorld() {
	return <Hello />;
}
// 올바른 사용법

React 엘리먼트가 JSX로 작성된 경우 "대문자"로 시작해야 합니다.(PascalCase) 소문자로 시작하게 되면 일반적인 html 엘리먼트로 인식하게 됩니다. 이렇게 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 합니다.

4. 조건부 렌더링을 할 경우

JSX에서 조건부 렌더링을 하려면 if문 대신 삼항연산자를 사용해주어야 합니다.

5. 여러 개의 엘리먼트를 표시할 때

React에서 여러 개의 HTML 엘리먼트를 표시하려면, map() 함수를 사용해야 합니다. 이 때 반드시 "key" JSX 속성을 넣어야 합니다. 이 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.