리액트(React) JSX의 개념과 문법 정리

JSX란?

JSX는 리액트에서 사용하는 문법인데, 특징은 가독성이 좋게 HTML과 자바스크립트를 표현할 수 있다는 점이다.

원래 자바스크립트는 HTML상에 직접 넣으면 너무 하드코딩이 되기 때문에, <body>태그 최하단에 <script></script>를 배치하여 표현하거나 따로 파일로 분리를 했었다.

그래서 자신이 짠 코드가 아니라 타인의 코드를 보면 어떤 이벤트에 연결되는 조건식이 무엇인지 위아래로 또는 다른 파일을 왔다갔다하면서 확인해야만 했다. 그에 반헤 JSX는 비교적 한눈에 그 구조가 파악이 되는 것 같다.

import의 원리

import React from 'react'

Create React App같은 것을 이용하여 리액트 프로젝트를 만들 때 node_modules라는 디렉토리가 생성이 되는데 거기에 react 모듈이 같이 들어간다. 그래서 import를 통해 react를 불러올수가 있는 것이다.

이런 모듈들을 패키징해주는 것이 Webpack이다.

import logo from './logo.svg';
import './App.css';

이렇게 이미지 파일이나 css 스타일을 불러올수 있는것도 웹팩의 로더(loader)라는 녀석이 해주는 것이라고 생각하면 된다.

한편 이 웹팩의 로더중엔 바벨로더라는게 있는데, 얘는 ES6이상의 문법은 ES5 문법으로 변환해준다. 즉 버전을 다운 시킨다는 이야기다. 그 이유는 구형 브라우저에서는 최신 자바스크립트를 인식하지 못하기 때문에, 웹호환성을 위해서 안정적인 버전으로 재변환 시켜주는 것이다.

JSX의 변환

JSX는 자바스크립트의 확장 문법이다.

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

원래 이렇게 표현해야 할 리액트의 코드가 JSX로 표현을 하면

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

이렇게 직관적으로 표현이 가능하다.

JSX의 문법

1. 컴포넌트에 여러 요소가 있다면 부모 요소로 감싸줘야 한다.

<div>

</div>

이런식으로 div를 이용해서 감싸주거나.

맨위에 import React, { Fragment } from 'react'; 추가하고 div 자리를 <Fragment>라는 태그로 쓸수도 있고,

Fragment를 간단하게 <></> 이렇게 빈 괄호로 처리할수도 있다.

2. 자바스크립트를 사용할 때는 { }로 감싸준다.

3. 조건문

조건문은 삼항연산자를 사용하거나, 논리 연산자를 사용한다.

즉 if문을 사용하지 않는다는 것이다.

삼항연산자는 기본 자바스크립트나 여타 프로그래밍 언어와 똑같은 방식으로 사용한다.

논리연산자 &&를 이용한 Example.

import React from 'react';

function App() {
  const name = '사과';
return <div>{name === '사과' && <h1>사과 입니다.</h1>}</div>;
}

export default App;

이렇게 작성하면

이렇게 출력되고,

import React from 'react';

function App() {
  const name = '바나나';
return <div>{name === '사과' && <h1>사과 입니다.</h1>}</div>;
}

export default App;

이렇게 거짓인 문장을 && 앞에 던져두면 뒤에껀 표시되지 않는다.

기본적으로 and 연산자는 앞에것이 거짓이면 뒤에것을 실행하지 않는다.

name === '사과'는 위에서 현재 False인 값이고,

<h1>사과 입니다.</h1>는 값을 가진 문장이므로 True인 상태이다.

하지만 두개가 합쳐져 있다면 하나만 거짓이여도 전체가 거짓이 되므로

name === '사과' && <h1>사과 입니다.</h1> 전체가 표시되지 않는 것이다.

리액트는 false를 랜더링할때는 null과 마찬가지로 아무것도 나타내지 않기 때문이다.

참고로 자바스크립트에는 False의 속성을 갖는 값들이 있다.

null, undefined, NaN, 0, '', "",

리액트에서 주의점은 이중에서 0은 Falsy한 값이지만 화면에 나타난다는 것이다.

0만 유의해서 기억하고 넘어가면 된다.

import React from 'react';

function App() {
return <div>{null && <h1>사과 입니다.</h1>}</div>;
}

export default App;

빈화면 표시.

import React from 'react';

function App() {
return <div>{0 && <h1>사과 입니다.</h1>}</div>;
}

export default App;

0이 표시된다.

즉 0을 먼저 연산한후 False로 인식하긴 했고, 그래서 && 뒤에 <h1>사과 입니다</h1>를 연산하지 않았지만

예외적으로 0의 연산결과는 랜더링으로 표시해주긴 한다고 생각하면 된다.

4. undefined 처리 방법

import React from 'react';

function App() {
return undefined;
}

export default App;

undefined를 리턴하게 되면

Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
▶ 17 stack frames were collapsed.
Module../src/index.js
C:/Users/han30/hello-react/src/index.js:7
   4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | 
   9 | // If you want your app to work offline and load faster, you can change
  10 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
__webpack_require__
C:/Users/han30/hello-react/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;
View compiled

이런 에러가 뜨게 된다.

import React from 'react';

function App() {
return (
  <h2>{undefined}</h2>
)
}

export default App;

하지만 이렇게 JSX 표현식으로 감싸고 그 안에 undefined 값이 있는 건 괜찮다. 빈화면이 표시되고 에러는 안난다.

만약 undefined가 나왔을 경우 이걸 화면에 표시해주고 싶다면,

import React from 'react';

function App() {
  const 변수 = undefined;
  return (
    <h2>{변수 || '값이 undefined입니다.'}</h2>
  )
  }

export default App;

이런식으로 표현하면 된다.

||는 or 연산자인데, 이건 앞의 값이 참이면 무조건 참이 되므로 뒤에를 연산하지 않는다.

요약하자면 and는 거짓일때 뒤에를 따지지 않고, or는 참일때 뒤에를 따지지 않는다는 속성을 이용해서

무엇을 보여줄지 말지를 JSX에서 조건문처럼 컨트롤 하는 것이라고 이해하면 된다.

조금더 기억하기 쉽게 말을 짤라버리자면 그냥 이렇게 외워두는것도 편하다.

&&: 거짓이면 뒤에꺼 무시해. 참일때만 뒤에꺼 인식해라.

||: 참이면 뒤에꺼 무시해. 거짓일때만 뒤에꺼 인식해라.

결국 if문의 조건절을 !== 으로 처리할지 === 으로 처리할지 정도의 의미라고 생각하면 된다.

5. 하이픈을 카멜케이스로 표시해야함

background-color라는 css 속성명이 있다면 JSX에서는 backgroundColor로 작성해야 한다.

6. class 대신 className을 사용한다.

일반적인 html에서는 <div class="myclass"></div>로 표현했지만 JSX에서는 <div className="myclass"></div>로 표현하게 좋다고 한다. 리액트 버전이 올라오면서 예전엔 오류로 표기하던걸 자동변환해주지만, 권장은 아니라는 말.

7. 태그는 반드시 닫아준다.

8. JSX 내부의 주석은 { /* */ }로 해준다.

'React' 카테고리의 다른 글

리액트훅 useState에서 setState함수의 인자값에 대하여 (0)	2020.04.17
리액트에서 classnames 사용방법 (0)	2020.02.22
[리액트 훅(ReactHooks)] useMemo와 useCallback (0)	2020.02.17
리액트(React)의 불변성과 map, filter, concat, slice (0)	2020.02.13
React에서 ref를 사용하는 경우 (0)	2020.02.11

차니의 개발 블로그

리액트(React) JSX의 개념과 문법 정리

'React' 카테고리의 다른 글

티스토리툴바

리액트(React) JSX의 개념과 문법 정리

'React' 카테고리의 다른 글

'React' Related Articles

티스토리툴바