[React.js] JSX

 

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.

 

JSX

JSX는 자바스크립트의 확장 문법이며 자바스크립트와 html을 혼합하여 사용할 수 있는 리액트에서 주로 사용하는 표현식이다.

 

JSX를 사용해보자. 전에 만들었던 reactexam1 프로젝트를 실행시키고 src 경로에 MyHeader.js를 새로 생성한다.

const MyHeader = () => {
    return <header>헤더</header>; 
    // 컴포넌트는 return이 없으면 에러가 난다.
}; 

export default MyHeader;

 

그리고 우리가 만든 MyHeader 컴포넌트를 사용하기 위해 App.js로 이동해 import 시킨다.

import './App.css';
import MyHeader from './MyHeader'; // import 추가

function App() {

  let name = "레호";
  return (
    <div className="App">
      <MyHeader/>    <!--일반 태그 사용하는 방식처럼 호출하면 된다.-->
      <header className="App-header">
      <h2>안녕 리액트 {name}</h2>
      </header>
    </div>
  );
}

export default App;

개발자 도구를 이용해 elements를 확인해보면 MyHeader가 잘 껴져있는 걸 확인할 수 있다.

반응형

index.js

최상위 컴포넌트는 현재 "App"이다.

최상위 컴포넌트를 변경하고 싶다면 index.js 파일을 수정해야 한다.

이 두 개의 부분을 수정하면 된다. 근데 관례상 최상위 컴포넌트를 App이라고 하니까 굳이 수정할 필요는 없을 것 같다.

 

JSX 문법

닫힌 규칙

여는 태그가 있으면 반드시 닫는 태그가 있어야 한다.

<div></div>
<div /> <!--self closing tag-->

최상위 태그 규칙

JSX를 컴포넌트로 만들어서 리턴하려면 반드시 최상위 태그로 묶고 리턴해야 한다. 만약 최상위 태그를 사용하기 싫다면 react.fragment 기능을 사용하면 된다. react.fragment를 사용하려면 먼저 import 작업이 필요하다. react의 기능이기 때문에 react를 import 한다.

import React from 'react';

function App() {
  return (
    <React.Fragment>
      <MyHeader/>
      <header className="App-header">
      <h2>안녕 리액트</h2>
      </header>
      <MyFooter/>
    </React.Fragment>
  );
}

or

function App() {
  return (
    <> <!--빈 태그로도 React.Fragment를 사용-->
      <MyHeader/>
      <header className="App-header">
      <h2>안녕 리액트</h2>
      </header>
      <MyFooter/>
    </>
  );
}

개발자 도구로 확인해보면 감싸져 있지 않은걸 확인할 수 있다.