[ React-Tutorial-03 ] JSX

01. Componet 파일 파헤치기

이전에 만든 hello-react 프로젝트를 열어보면 아래와 같은 파일이 확인된다.

React는 웹 어플리케이션에서 사용되는 UI들을 재사용 가능한 Component로 분리하여 작성함으로써, 프로젝트의 유지보수성을 끌어올려준다.

여기서 Component에 해당하는 코드는 App.js 에서 확인 가능하다.

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

import 한다는 것은, 무엇을 불러온다는 것이다. 

1번줄 코드는 리액트와 그 내부의 Component를 불러온다. 파일에서 JSX를 사용하려면 꼭 React를 import 해주어야 한다.

2번줄 코드는 logo.svg 파일을,

3번줄 코드는 App.css 파일을 불러왔다.

이렇게 import를 하는 것은, webpack을 사용하기에 가능한 작업이다. 이렇게 불러오고 나면 나중에 프로젝트를 빌드하게 됬을때 webpack에서 파일의 확장자에 따라,

다른 작업을 하게된다. css파일을 불러오게 되면, 나중에 사용한 프로젝트 파일을, 한 곳에 모두 결합해주는 작업을 진행하고,

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

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

받아오게 된다.

Component를 만드는 방법은 두가지가 있다. 하나는 아래와같이 Class를 통하여 만드는 것,

다른 하나는 함수를 통하여 Component를 만드는 것인데 함수를 통하여 만드는 것은 나중에 알아보도록 하고, 아래 코드를 보자

클래스 형태로 만들어진 컴포넌트에는 꼭! render 함수가 필요하다. 그리고 그 내부에서는 JSX를 return 해주어야 한다. 

아래 보이는 HTML 같은 코드가 바로 JSX 이다.

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;

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

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

4번 줄을 보면 만들어진 Component를 불러올때는 이렇게 import를 사용하여 불러와 준다.

import App from './App';

7번 줄을 보면 브라우저 상에서 리엑트 Component를 보여주기 위해서  ReactDOM.render  함수를 사용한다. 첫번째 파라미터는 랜더링할 결과물이고,

두번째 파라미터는 컴포넌트를 어떤 DOM에 그릴지 정해준다.

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

id가 root인 DOM을 찾아서 그리도록 설정되어있다, 해당 DOM은  public/index.html 파일에서 찾아볼 수 있다. 해당 파일 안에있는

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

를 찾아서 랜더링 해주는 것이다.

02. JSX

JSX에 대해서 더 자세히 알아보자면, 얼핏보기에는 HTML 같지만 HTML이 아니다. 이건 JavaScript 이다. 무슨소리인가 하면,

http://bit.ly/2FJsJmo

만약, Component를 만들 때 우측에 있는 것처럼 작성해야 한다면, 작업하기가 싫어질 것이다.

React 개발을 쉽게 하기 위해서, HTML과 비슷한 문법으로 작성을 하면 이를 React.createElement를 사용하는 JavaScript 형태로 변환시켜준다.

XML 형태의 코드를, JavaScript로 변환해야 하기 때문에, JSX를 제대로 사용하기 위해서는 몇가지 규칙을 준수해야 한다.

일단 App.js 의 상단 css, svg import 부분을 지워주고 Class안쪽 return되는 부분을 전부 지워준다. 

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

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

export default App;

꼭 닫혀야 하는 테그

테그는 꼭 닫혀있어야 한다.  <div>  테그를 열었으면  </div>  를 통하여 꼭 닫아주어야 한다. 보통  input 이나  br  테그를 작성할때,

테그를 안닫을때도 있는데, 닫지 않게되면 React에선 오류를 겪을 수 있으니 꼭 참고한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <nput type="text">
      </div>
    );
  }
}

export default App;

감싸져 있는 엘리먼트

2개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다. 코드를 아래와 같이 작성하게 되면,

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

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

export default App;

하나의 테그로 감싸져 있어야 한다는 오류를 나타내게 된다.

가장 간단하게 해결할 수 있는 방법은 아래와같이  div 테그로 감싸 주는 것 이다.

import React, { Component } from 'react';

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

export default App;

간단한 방법이지만, 가끔 어떤 상황에서 단순히 감싸기 위해서  div 를 사용하는게 마음에 들지 않을 수도 있다.

예를 들어서 CSS Style 관련 설정 도중 코드가 꼬이게 될 수도 있고,  table 관련 테그를 작성 할 때 번거롭게 될 수 있다.

그러한 상황에서는 아래와 같이  Fragment 라는 것을 사용하면 된다. ( React v16.2 부터 도입 )

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

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

export default App;

JSX 안에서 JavaScript 값 사용하기

JSX 내부에서 Javascript 값을 사용 할 땐 아래와 같이 사용한다.

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

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

export default App;

조건부 렌더링

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

반면에 if문은 사용이 불가능하다.( 사용하려면 IIFE(즉시 실행 함수 표현)을 사용해야 한다. ) 아래 삼항연산자 코드 예제를 보자

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (
맞아요!
)
            : (
틀려요!
)
        }
      </div>
    );
  }
}
export default App;

이렇게 하면, 맞아요가 보여질 것이다. 반면 1 + 1 === 2 부분을 1+ 1 === 3 으로 바꿔보면 틀려요가 나온다.

다음은 AND 연산자를 사용해보자. 삼항연산자는 true 일 때와 false 일 때 다른것들을 보여주고 싶을 때 사용하는 반면에,

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

import React, { Component } from 'react';

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

export default App;

대부분의 상황에선 위의 방식으로 해결 가능하지만, 가끔씩 조금 복잡한 조건을 작성해야 할 때도 있다. 그러한 조건들은 웬만하면 JSX 밖에서 로직을 작성하는게 좋다.

하지만 꼭 JSX 내부에서 작성해야 한다면, 아래와 같이 IIFE(즉시 실행 함수 표현)을 사용한다.

import React, { Component } from 'react';

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

export default App;

if문 대신 아래와 같이 switch 문을 사용해도 무방하다,

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

여기서 사용된 것은 arrow function 이라는 this, arguments, super 개념이 없는 익명함수이다. ES6에서 자주사용하게 된다.

03. 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}>
        안녕하소!
      </div>
    );
  }
}

export default App;

HTML에서 그냥 텍스트형태로  ="backgroundColor:black; padding: 16px; ...."  이런식으로 작성했다면 React에서는 객체 형태로 작성해 주어야 한다.

클래스를 설정하게 될 때에는 HTML 에서는  <div class="hello">  였다면, React Component 에서는 class 대신에 className을 사용한다.

App.css 파일을 열어서 아래와 같이 수정한다.

.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}

그 뒤에 App.js 파일은 아래와 같이 수정한다.

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

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

export default App;

04. 주석

마지막으로, 주석은 어떻게 작성하는지 알아보자.

import React, { Component } from 'react';

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

export default App;

위에 보이는 바와 같이,  {* ... *}  사이에 넣거나, 테그 사이에 넣을수도 있다.

이 글은 Velopert님의 블로그에서 React 포스팅을보며 실습하며 공부한 자료입니다.