[벨로퍼트] JSX

컴포넌트 파일 파헤치기

리액트를 사용하면 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수를 우수하게 해준다. 컴포넌트에 해당하는 코드는 App.js 에서 확인할 수 있다.

 

import

무엇인가를 불러온다는 것이다. 첫번째 import는 리액트와 그 내부의 Component를 불러온다. 파일에서 JSX를 사용하려면, 꼭 React를 import 해주어야 한다. import 한다는 것은 webpack을 사용하기에 가능한 작업이다. 이렇게 불러오고 나면 나중에 프로젝트를 빌드하게됐을 때 웹팩에서 파일의 확장자에 따라 다른 작업을 하게된다.

CSS 파일을 불러오게되면, 나중에 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해주는 작업을 진행하고, 자바스크립트 파일을 불러오게되면, 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐준다.

 

컴포넌트를 만드는 두가지 방법

1) 클래스를 통해서 만드는 방법 (App.js의 초기 코드/강의에서는 다 이렇게 되어있음;)

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;

클래스 형태로 만들어진 컴포넌트에는 반드시 "render()" 가 있어야하고, 그 내부에서는 JSX를 return 해주어야한다. 위에 보이는 html 같은 코드가 바로 JSX 이다. 

마지막 줄에 있는 "export" 는 우리가 작성한 컴포넌트를 다른 곳에서 불러와서 사용할 수 있도록 내보내기하는 역할이다.

 

2) 함수를 통해 컴포넌트를 만드는 방법 (App.js의 초기 코드/내가 만들면 다 이렇게 되어있음;)

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//구버전 import registerServiceWorker from './registerServiceWorker';
//신버전 import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
//구버전 registerServiceWorker();
//신버전 serviceWorker.unregister();

브라우저 상에서 리액트 컴포넌트를 보여주기 위해서는 ReactDOM.render 함수를 사용한다. 첫번째 파라미터는 렌더링 할 결과물이고, 두번째 파라미터는 컴포넌트를 어떤 DOM에 그릴지 정해준다. 위의 예제에서는 id가 root인 DOM을 찾아서 그리도록 설정되어 있는데 해당 DOM은 public/index.html 파일에서 찾아볼 수 있다.

 

JSX(JavaScrpitXML)

만약에 컴포넌트를 만들 때 우측에 있는 것 처럼 작성해야 한다면 싫을 것이다 (..!) 리액트 개발을 쉽게하기 위해 HTML과 비슷한 문법으로 작성하면 이를 React.createElement를 사용하는 자바스크립트 형태로 변환시켜준다. XML 형태의 코드를 자바스크립트로 변환해야 하기 때문에 JSX를 제대로 사용하기 위해서 몇가지 규칙을 준수해야한다.

 

꼭 닫혀있어야 하는 태그

태그는 꼭 닫혀있어야한다(당연). <div> 태그를 열었으면, </div>를 통하여 태그를 꼭 닫아주어야 한다.

 

감싸져있는 엘리먼트

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div> //이렇게!!
        <div>
          Hello
        </div>
        <div>
          Bye
        </div>
      </div>
    );
  }
}

export default App;

 

JSX 안에 자바스크립트 값 사용하기

JSX 내부에서 자바스크립트 값을 사용하고자 할 때는 아래와 같이 사용할 수 있다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'react'; //이렇게!!
    return (
      <div>
        hello {name}!
      </div>
    );
  }
}

export default App;

 

style과 className

JSX에서 style과 CSS 클래스를 설정할 때, 기존의 html에서 했던 방식과는 사뭇 다르다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '12px'
    };

    return (
      <div style={style} className="App">
        hi there
      </div>
    );
  }
}

export default App;

위와 같이, 리액트에서는 객체 형태로 스타일을 작성해야한다. 또한 클래스를 설정할 때 리액트 컴포넌트에서는 class 대신에 className을 사용한다.

 

주석

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {/* 주석은 이렇게 */}
        <h1
          // 태그 사이에
        >리액트</h1>
      </div>
    );
  }
}

export default App;

 

---

누구든지 하는 리액트 3편: JSX | VELOPERT.LOG