React Basic : JSX

박철연·2022년 1월 22일

React react-basic

React Basic

목록 보기

4/11

저번 글에서 복잡한 Element들을 만들기 위해 작성한 코드 기억 나시나요? 엉망진창인 코드를 JSX를 쓰면 훨씬 깔끔하게 작성할 수 있습니다.

컴파일과 Babel

우리는 자바스크립트 코드를 열심히 짭니다. 라이브러리도 쓰고, 저희가 파고 있는 React 같은 프레임워크도 쓰고, 새로운 문법도 쓰고...

하여튼 이렇게 짠 코드들은 사실 날 것 그대로 브라우저한테 배달되지 않습니다. 실제로 브라우저들마다 소화할 수 있는 버전의 자바스크립트가 다르기 때문입니다.

악명높은 IE는 자바스크립트가 발전하면서 생겨난 여러 신기술들을 전혀 지원하지 않습니다. 당장 저번 시간에 사용했던 화살표 함수도 IE는 못 알아 먹어요.

이럴 때 우리는 Babel을 사용합니다. Babel은 자바스크립트 용 트랜스컴파일러로, 최신 버전의 JS 코드를 이전 버전과 호환되는 방식으로 코드를 변환해주는 도구입니다.

글 서두에 Babel을 언급한 이유는, JSX 코드 역시 Babel에 의해 컴파일되어 실제로 실행할 수 있는 코드로 변환되기 때문입니다.

따라서 JSX 문법을 코드를 치면서 연습하기 위해서는 문서 내에 Babel을 사용할 수 있는 기본 세팅이 되어있어야 합니다.

기본 Babel 세팅

https://babeljs.io/setup#installation

해당 링크에 Babel 설치 및 사용법이 자세하게 나와있습니다.

React와 마찬가지로, 직접 설치해서 사용할 수도 있지만 저는 CDN 형식으로 사용해볼 겁니다.

// Babel CDN Link
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
// 사용자 지정 script
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

CDN 부분을 html 내에 포함시켜 주시고, 아래의 script 태그처럼 Babel로 컴파일하고 싶은 script 태그에 type="text/babel"을 포함시켜 주세요.

이 과정이 끝났다면 JSX를 사용할 준비가 모두 끝난 것입니다.

JSX 만들어보기

오늘의 주인공인 JSX 문법이 그래서 뭘까요? JSX는 JavaScript Extends의 줄임말로, 컴포넌트 구성을 쉽게 하기 위해 만들어진 문법입니다.

저번 시간에 느끼셨죠? createElement 만으로 중첩된 태그들을 만드려면 얼마나 복잡한지를 말이에요.

그래서 JSX는 기본적으로 다음과 같은 형태를 가지고 있습니다.

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

직관적으로 눈에 딱 들어오는 부분은, HTML의 태그 형태를 그대로 가져왔다는 것입니다.

그러다 보니 작성하는 코드의 길이도 줄어들고, 구조를 알아보기도 쉽고, 코드 가독성이 월등하게 향상됩니다.

저번 글에서 만들었던 코드도 한번 JSX로 바꿔보겠습니다.

function App(){
	return (
    	<section>
      	  <div>
      	    <h1>Hello</h1>
            <ul>
      	      <li>React1</li>
              <li>React2</li>
            </ul>
          </div>
        </section>
    );
}

휠씬 깔끔한데다가 문서 구조 파악도 너무 쉽습니다. 이제 들여쓰기한 보람이 좀 느껴지네요.

이러한 가독성 이슈 외에도, Babel을 통해 컴파일되는 과정에서 문법적 오류를 찾아내기 쉽기 때문에 JSX는 여러모로 유용합니다.

JSX 문법

JSX가 우리에게 아주 유용한 도구가 될 수 있다는 것은 방금 확인했습니다. 그러면 실제 프로젝트에서 JSX를 사용할 때 몇 가지 유의해야 할 문법 규칙을 알아보겠습니다.

태그 닫는 법
JSX는 태그 닫는 것에 매우 민감합니다. HTML에서는 가끔씩 태그 실수를 해도 너그럽게 넘어가주지만 JSX는 그렇지 않아요.

특히, 자식 요소가 있다면 꼭 닫는 태그를 달아주어야 하고, 자식 요소가 없으면 열면서 닫아야 합니다.

<p>Blah Blah</p>
<br />

최상위 요소는 딱 하나만!
우리가 JSX로 변환했었던 예시를 살펴보면, 최상위 요소는 section이라는 것을 알 수 있습니다. 이 section과 같은 수준에 요소를 하나 이상 생성하면 JSX는 이를 엄격하게 지적합니다.

바꿔 말하면, 컴포넌트 내의 여러 요소들은 하나의 요소로만 감싸져 있어야 합니다. 이는 Virtual DOM에서 컴포넌트 변화를 효율적으로 감지하기 위함입니다.

또 최상위 요소를 리턴할 때에는 반드시 ()로 감싸주어야 합니다.
자바스크립트 표현식
JSX 안에서는 {}를 사용하면 자바스크립트 표현식을 작성할 수 있습니다. 아래 코드 블록을 참고하세요.

function App() {
	const name = 'Park'
    return(
    	<div>
      	  <h1>Hi! {name}</h1>
        </div>
    )
}

if문 사용금지
JSX 내에서는 if문을 사용할 수 없습니다. 만약 조건문을 사용하고 싶다면 JSX 문법 밖에서 코드를 작성하거나, {} 안에 삼항 연산자를 사용해야 합니다.
class 대신 className 사용
HTML 태그에 class를 넣는 건 이미 익숙하시죠? JSX에서는 class가 아니라 className으로 넣으셔야 합니다. N 대문자에요!