2021.03.02 / React - 리액트 확장자

.js / .jsx 차이

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

리액트를 설치하면 기본파일 중 App.js가 루트 컴포넌트로 생성된다.

위의 return 안에 해당하는 HTML같이 생긴 것이 JSX코드이다.

JSX코드는 리액트 컴포넌트를 만들 때 사용하는 언어로,

.js로 파일을 생성하면, render()에서 자동 완성이 되지 않는다.

리액트에서는 .jsx로 작성해야 HTML이 자동완성이 된다.

하지만 HTML 문법이지만 이것은 자바스크립트이다.

리액트에서 빌드시 HTML을 자바스크립트로 고쳐준다.

 

 

참고

- codingmania.tistory.com/269