누구든지 하는 리액트 3편: JSX

참고 자료

누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG

재사용 가능한 컴포넌트로 분리 작성함으로써 프로젝트의 유지보수성을 우수하게 한다.

 

 

App.js

import React, { Component } from 'react';

파일에서 JSX를 사용하려면 필수적으로 React를 import 해야 한다.

리액트와 그 내부의 Component 불러온다.

 

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

webpack을 사용하여 파일을 불러오는 것이다.

css 파일을 불러 오면 나중에 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해 주는 작업을 진행한다.

js 파일을 불러오면 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합친다.

svg처럼 사전에 따로 설정되지 않은 확장자의 경우 그냥 파일로 불러온 다음 특정 경로에 사본을 만들어 주게 되고, 해당 사본의 경로를 텍스트로 받아온다.

 

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

class 형태로 만들어진 component에는 꼭 render 함수가 있어야 한다.

내부에서는 JSX를 return 해 줘야 한다. 위에 보이는 html 같은 코드가 바로 JSX이다.

 

export default App;

작성한 component를 다른 곳에서 불러와서 사용할 수 있도록 내보내기 한다.

 

 

index.js

import App from './App';

직접 만든 component를 불러올 때는 이렇게 import를 사용해서 불러온다.

 

import ReactDOM from 'react-dom';

...

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

브라우저 상에 component를 보여 주기 위해서 ReactDOM.render 함수를 사용한다.

첫 번째 파라미터는 렌더링 할 결과물이고, 두 번째 파라미터는 component를 어떤 DOM에 그릴지 정한다.

id가 root인 DOM을 찾아서 그리도록 설정되어 있는데 해당 DOM은

 

<div id="root"></div>

public/index.html 파일에 있는 해당 코드를 찾아서 렌더링 해 주는 것이다.

---

React 개발을 쉽게 하기 위해서 HTML과 비슷한 문법으로 작성하면 React.createElement를 사용하는 자바스크립트 형태로 변환한다.

XML 형태의 코드를 자바스크립트로 변환해야 하기 때문에 JSX의 몇 가지 규칙을 준수해야 한다.

 

 

꽉 닫혀야 하는 Tag

<div> 태그를 열었으면 </div>를 통해 태그를 꼭 닫아야 한다. html이랑 똑같다.

 

 

감싸져 있는 Element

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

잘못된 코드 (오류)

import React, { Component } from 'react';

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

export default App;

 

올바른 코드

 

import React, { Component } from 'react';

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

export default App;

근데 위와 같은 방식은 단순히 Element를 감싸기 위해 새로운 div를 사용함으로써 스타일 관련 설정에서 코드가 꼬일 수도 있고 table 관련 태그를 작성할 때 번거로워질 수 있다.

이럴 때 Fragment 라는 것을 사용할 수 있다.

 

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <div>
          Hello
        </div>
        <div>
          Bye
        </div>
      </Fragment>
    );
  }
}

export default App;

 

 

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

import React, { Component } from 'react';

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

export default App;

const는 ES6에 도입된 키워드로 한 번 선언하고 바뀌지 않는 값을 설정하는 상수이다.

바뀌게 될 수 있는 값은 let을 사용하여 선언한다.

기존의 자바스크립트의 var과 비슷하지만 작동 방식에 있어서 scope가 다르다.

var은 scope가 함수 단위

 

function foo() {
  var a = 'hello';
  if (true) {
    var a = 'bye';
    console.log(a); // bye
  }
  console.log(a); // bye
}

const와 let은 scope가 블록 단위

 

function foo() {
  let a = 'hello';
  if (true) {
    let a = 'bye';
    console.log(a); // bye
  }
  console.log(a); // hello
}

 

 

조건부 렌더링

JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나 AND 연산자를 사용한다. 반면 if문을 사용할 수 없다. (사용하려면 IIFE(즉시 실행 함수 표현)을 사용해야 한다.)

 

import React, { Component } from 'react';

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

export default App;

위 코드 삼항 연산자 예제이며, 맞아요를 출력할 것이다.

반면 1 + 1 === 2 대신 1 + 1 === 3으로 바꾼다면 틀려요가 출력된다.

 

 

import React, { Component } from 'react';

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

export default App;

위 코드는 AND 연산자 예제이다.

삼항연산자는 true일 때와 false일 때 다른 것들을 보여 주고 싶을 때 사용하는 반면

AND 연산자의 경우 단순히 우리의 조건이 true일 때만 보여 주고 false 경우 아무것도 보여 주고 싶지 않을 때 사용한다.

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

export default App;

복잡한 조건을 작성해야 할 때는 웬만하면 JSX 밖에서 로직을 작성하는 것이 좋지만 JSX 내부에서 작성해야 한다면 위와 같이 IIFE를 사용한다. if문 대신 switch 문을 사용해도 상관없다.

위 코드는 다음과 같이 쓸 수도 있다.

 

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

여기서 사용된 건 화살표 함수 라고 부른다.

this, arguments, super 개념이 없는 익명 함수이다. 앞으로 ES6에서 자주 사용하게 될 것이다.

 

 

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;

html에서는 그냥 텍스트 형태로 작성했지만

React에서는 객체 형태로 작성해야 한다.

그리고 class 설정할 때는 html에서 <div class=”hello”> 라고 작성하는 것과 달리

React component에서는 className을 사용한다.