[리액트] JSX 리액트 문법 소개, 리액트 코드 이해

JSX란?

jsx란 JavaScript를 확장한 문법입니다.

자바스크립트의 공식적인 문법은 아니지만 바벨에서는

개발자들이 임의로 만든 다양한 문법 지원을 위해 preset 또는 plugin들을 지원하고 있습니다. 

 

더 간결한 구문을 제공하는 커뮤니티로는 

• react-hyperscript   https://github.com/mlmorg/react-hyperscript  
• hyperscript-helpers   https://github.com/ohanhi/hyperscript-helpers

등이 있습니다.

 

리액트에서는 jsx 사용이 필수가 아니고, 빌드 환경에서 컴파일 설정을 원치 않을때는 jsx 없이 사용하는 게 편리할 수 있습니다. 

 

 

---

JSX 장점

• 리액트 안에서 UI 관련 작업을 할 때 시각적으로 편리하다.
• 리액트의 에러 및 경고 메시지 표시를 도와준다.
• 컴포넌트를 렌더링 할 때마다 React.createElement 함수를 반복해서 사용할 필요가 없다.
• 컴포넌트를 HTML 쓰듯이 작성할 수 있다.

 

---

JSX 문법

JSX에서 변수 표현식 포함하기

title 변수를 선언한 후 중괄호로 감싸서 사용 가능

function App() {
  const title = '변수 선언';
  return (
  <> 
    <h1>{title}</h1>
  </>
  );
}

 

하나의 부모 요소로 감싸기, 그 방법들

요소가 여러개인 경우 하나의 부모요소로 꼭 감싸줘야 합니다.

컴포넌트 내부가 하나의 DOM 트리 구조로 이루어져야 Virtual DOM에서 효율적으로 변화 감지 및 비교가 가능해지기 때문입니다.

 

※ 하나의 요소로 감싸지 않을 경우 아래와 같은 에러메세지가 표시 됨.

src\App.js
  Line 8:4:  Parsing error: Adjacent JSX elements must be wrapped 
in an enclosing tag. Did you want a JSX fragment <>...</>? (8:4)  

 

<div> 를 사용하거나 <Fragment> 또는 <> 을 사용해서 부모 요소로 표현할 수 있습니다.

function App() {
  const title = '리액트 <div>로 감싸는 방법';
  return (
  <div> 
    <h1>{title}</h1>
    <h2>{title}</h2>
  </div>
  );
}

function App() {
  const title = '리액트 <Fragment>로 감싸는 방법';
  return (
  <Fragment> 
    <h1>{title}</h1>
    <h2>{title}</h2>
  </Fragment>
  );
}

function App() {
  const title = '리액트 <>로 감싸는 방법';
  return (
  <> 
    <h1>{title}</h1>
    <h2>{title}</h2>
  </>
  );
}

 

태그 선언하면서 동시에 닫기, self-closing태그

태그 사이에 내용이 들어가지 않는 경우에는 self-closing 태그를 사용 가능합니다.

<input/>

function App() {
  const title = 'self-closing 태그표현';
  return (
  <> 
    <h1>{title}</h1>
    <input/>
  </>
  );
}

 

 

참고 : 리액트를 다루는 기술, 저자 : 김민준 | 리액트 공식 홈페이지 -  https://reactjs.org/

---

* 잘못된 정보 및 오류가 있을 경우 댓글에 적극적으로 말씀 부탁드립니다. 수정, 보완 하겠습니다.

* 리액트 문법은 천천히 추가할 예정입니다.