[React] #1 JSX

1. JSX란?

JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법으로 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScrip의 확장 문법이다. 리액트 컴포넌트의 return문 내에 이러한 형태로 코드를 작성하면, 반환된 내용이 번들링 과정에서 babel을 통해 JSX에서 일반 JavaScript 형태로 변환된다.

(* 번들링은 코드가 브라우저에서 실행되기 전, import한 모듈들을 연결하여 합쳐진 파일로 만든 후 브라우저에 최종 렌더링해준다.)

(* Babel은 JavaScript의 문법을 확장해주는 도구로서 아직 지원되지 않는 최신 문법이나 편의상 사용하거나 실험적인 JavaScript 문법들을 정식 JavaScript 형태로 변환해준다.)

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

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

 

만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것! JSX는 마크업 언어로서 구조 파악이 쉽고, JS보다 직관적이다. 또한, HTML 태그들과 JS 표현식/문법 등을 사용할 수 있어 활용도가 높다.

 

2. JSX 문법

• 태그는 꼭 닫혀있어야 한다.
  (* 태그와 태그 사이에 내용이 들어가지 않을 때에는, <Hello />와 같이 Self Closing 태그를 사용해주어야 한다.)
• 컴포넌트에 두 개 이상의 요소가 존재한다면 반드시 부모 요소 하나로 감싸줘야 한다.
• 단순히 태그를 감쌀 때는 Fragment 태그를 사용할 수 있다. <Fragment>로 하위 자식 태그를 감싸면 최종 렌더링 시 Fragment 태그 없이 내부 요소들만 렌더링되어서 불필요한 태그를 줄일 수 있다.
  (* <></> 로 축약 가능!)

import React from 'react';

function App() {
	return (
    	<>
            <h1>Hello</h1>
            <h2>SoHyun</h2>
        </>
    );
}
export default App;

• JSX 내부에서 자바스크립트 변수는 { } brackets로 감싸 사용한다.

import React from 'react';

function App() {
	const name = 'react';
    return (
    	<>
        	<div>{name}</div>
        </>
    );
}
export default App;

• 인라인 스타일은 객체 형태로 작성되어야 하며 backgroundColor처럼 카멜 케이스 형태로 네이밍해주어야 한다.
• CSS class를 설정은 class=가 아닌 className=으로 설정해주어야 한다.
• 주석은 {/* */} 형태로 작성한다.
• 열리는 태그 내부에서는 // 형태로 주석을 작성한다.
• undefined만 반환하여 렌더링할 경우 오류가 발생한다. 예외로 JSX 내부에서 undefined를 렌더링하면 오류 없이 빈 페이지를 출력한다.
• JSX 내부에서는 if문을 사용할 수 없기 때문에 JSX 밖에서 if문/case문을 사용하거나 { } 안에 조건부(삼항) 연산자를 사용한다.

import React from ‘react‘;

function App() {
 	const name = ‘리액트‘;
 	return (
    	<div>
        	{name === ‘리액트‘ ? (
            	<h1>리액트입니다.</h1>
            ) : (
                <h2>리액트가 아닙니다.</h2>
            )}
        </div>
    );
}
export default App;

• AND 연산자(&&)를 사용하여 조건부 렌더링을 하면 왼쪽 값이 참일 경우에만 오른쪽 값을 렌더링한다. false를 렌더링할 때는 null과 마찬가지로 화면에 아무것도 나타나지 않지만 0은 예외적으로 나타난다.
• OR 연산자(||)를 사용하면 왼쪽 값이 거짓일 경우에만 오른쪽 값을 렌더링한다.

 

 

참고 자료 : https://thebook.io/080203/, https://react.vlpt.us