[React]JSX 살펴보기

in Study on react


리액트 컴포넌트의 파일을 열어 프로젝트를 확인해 보겠습니다.

리액트를 사용하면 웹 어플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로써, 프로젝트의 유지보수성을 증가시킵니다.

컴포넌트에 해당하는 코드는 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;

차례대로 살펴보면

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

첫번째 코드는 리액트와 그 내부의 Component를 불러옵니다. 파일에서 JSX를 사용하려면, 꼭 React를 import 해줘야합니다.

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>
    );
  }

클래스 형태로 만들어진 컴포넌트에는 꼭 render 함수가 있어야합니다. 그리고 그 내부에는 JSX를 return 해줘야 합니다. HTML같은 코드가 바로 JSX입니다.

마지막줄에 있는 코드는

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';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

브라우저 상에 리액트 컴포넌트를 보여주기 위해선 ReactDOM.render함수를 사용합니다. 첫번째 파라미터는 렌더링할 결과물, 두번째 파라미터는 컴포넌트를 어떤 DOM에 그릴지 정해줍니다.

이는 public/index.html 의 <div id="root"></div>에 렌더링을 해줍니다.

JSX

  • 태그는 꼭 닫혀 있어야 합니다.
    • html태그와 비슷하지만 항상 태그가 닫혀 있어야합니다.
  • 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야합니다.

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

JSX 내부에서 자바스크립트 값을 사용할 땐 다음과 같이 작성합니다.

mport React, { Component } from 'react';

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

export default App

조건부 렌더링

JSX 내부에서 조건부 렌더링을 할 때는 삼항자 연산자를 사용하거나, AND 연산자를 사용합니다.

삼항 연산자의 경우

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}

export default App;

AND 연산자의 경우, 삼항연산자와 다르게 조건이 true일 때만 보여주고 false일 경우 아무것도 보여주지 않습니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

export default App;

style과 className

스타일은 다음과 같이 작성할 수 있습니다.

import React, { Component } from 'react';

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

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

export default App;

그리고 class를 설정할 때는 className을 사용합니다.

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

class App extends Component {
  render() {
    return (
      <div className="App">
        리액트
      </div>
    );
  }
}

export default App;

주석

주석은 다음과 같이 작성합니다.

import React, { Component } from 'react';

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

export default App;