[React] React Project 개요 / JSX 실습

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

이번엔 새로 Project를 생성한 후 JSX를 간단하게 제어하는 것 까지 해보도록 하겠다.

 

프로젝트 구성

프로젝트를 처음 열면 여러 개의 폴더들이 있다.

여기서 src를 들어가자.

 

여기서 핵심은 App.js이다. 핵심적인 작업은 저기서 작업을 하게 될 것이다.

App.css는 CSS에 관련된 속성들이 저장되어있는 곳이라 생각하면 된다.

이후 변수 형태로 불러와 적용시킬 수 있다. 뒤 쪽에서 한 번 실습하도록 하겠다.

나머지 파일들은 아직 공부를 안 했기에 차후에 정리하겠다.

 

App.js를 열면 이전 포스팅에서 열렸던 화면의 설정이 되어있다. 이번엔 처음부터 작업한다 생각하고 모두 지우고 Main Class를 새로 만들어 보도록 하자.

Main Class을 생성할 때 정말 쉬운 키워드가 존재한다.

rcc

 

rcc를 치면 자동완성이 나올텐데 그대로 엔터를 누르면 다음과 같이 Class가 스스로 생성된다.

 

React 개념에서 설명한것과 같이 App Class는 Component를 상속받고 있다. 말 그대로 저 하나의 Class가 하나의 Component가 되는 것이다.

 

프로젝트 실습

Class 내부에 render() {}가 보일 것이다. 여기가 View가 렌더링 되는 부분이며, JSX문법이 작성되는 곳이다.

JSX는 React에서 나온 새로운 문법이다. JavaScript + HTML이라 생각하면 된다.

따라서 HTML 태그가 사용된다. 하지만 기존의 HTML 태그와 사용법이 조금 다르니 차차 배워가도록 하자.

JavaScript는 render()와 Scope 사이에서 작성할 수 있다.

 

간단하게 Hello World를 div 태그 사이에 입력하여 웹에 출력해보자.

 

VSCode 자동 저장 기능을 사용하면 바로 렌더링 되어 출력이 된다.

여기서 h 태그를 이용하여 출력도 가능하다.

 

 

JSX 주석

JSX 내부에서 주석을 처리할 수 있는데, // 나 /* */같은 기존과 같은 주석으로 처리할 수 없다.

JSX의 주석은 다음과 같은 형태로 되어있다.

 

<div>
   {/* <h1>Hello World!</h1> */}
</div>

 

JSX 내부에서 JavaScript 명령문 이용하기

JavaScript 명령어를 이용하려면 원래는 render()와 Scope 사이에서 사용할 수 있지만 {변수 or 명령어}를 통해 이용할 수 있다. 또한 외부에서 선언한 JavaScript 변수를 JSX 내부에서 사용할 수 있다.

 

우선 정수와 문자, boolean 변수를 생성하자.

import React, { Component } from 'react';

class App extends Component {
  render() {
    let a = 10;
    let b = true;
    let c = 'Hello';

    return (
      <div>

      </div>
    );
  }
}

export default App;

 

단순히 변수를 div에 입력하면 될 것 같지만 안 된다. JSX에선 인식되는 문자는 바로 렌더링 해서 화면에 출력해버리기 때문이다. JSX에서 JavaScript 문법을 사용하기 위해선 Scope를 따로 선언한 후 사용해야 한다.

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    let a = 10;
    let b = true;
    let c = 'Hello';

    return (
      <div>
        <h1>{c}</h1>
        <h2>{a}</h2>
      </div>
    );
  }
}

export default App;

 

결과는 다음과 같다.

 

 

이번엔 심화해서 삼항 연산자를 사용해보자. 삼항 연산자 또한 JavaScript문으로 작성되므로 Scope 처리 후 작성해야 한다.

JSX에서 If else문은 통하지 않으니 삼항 연산자를 사용하도록 하자.

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    let a = 10;
    let b = true;
    let c = 'Hello';

    return (
      <div>
        <h1>{c}</h1>
        {
          (b) ? '호랑이' : '고양이'
        }
        <h2>{a}</h2>
      </div>
    );
  }
}

export default App;

 

 

CSS Style 적용하기

기존엔 CSS Tag내부에 Style을 지정하여 폰트의 크기라던지 배경색 등 환경설정을 할 수 있었다.

JSX에선 JavaScript 변수를 생성해서 호출하여 적용시킬 수 있다. JavaScript로 fontSetting 객체를 선언하여 Tag에 삽입하여 적용해보자. 마찬가지로 JSX에서 JavaScript 변수를 적용하려면 Scope를 사용해야 한다.

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    let a = 10;
    let b = true;
    let c = 'Hello';

    let fontSetting = {
      backgroundColor : 'red',
      color : 'white'
    }

    return (
      <div style = {fontSetting}>
        <h1>{c}</h1>
        {
          (b) ? '호랑이' : '고양이'
        }
        <h2>{a}</h2>
      </div>
    );
  }
}

export default App;

 

 

위에서 말했듯 CSS 설정은 App.css에 등록하여 필요할 때 언제든지 호출하여 사용할 수 있다.

App.css에 들어가면 이미 선언된 명령들이 있다. 여기선 .변수{} 형태로 사용이 된다. 위에서 작성한 fontSetting을 가져와 새로 만들어 보자.

 

.fontSetting{
  background: red;
  color : white;
}

 

이후 App Class로 돌아와 적용시키기 전 먼저 해야 하는 작업이 있다.

바로 App.css를 import 시켜줘야 한다. 이후 태그에서 사용했던 style을 지우고 className을 통해 fontSetting을 불러와 적용하면 된다.

 

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

class App extends Component {
  render() {
    let a = 10;
    let b = true;
    let c = 'Hello';

    return (
      <div className = 'fontSetting'>
        <h1>{c}</h1>
        {
          (b) ? '호랑이' : '고양이'
        }
        <h2>{a}</h2>
      </div>
    );
  }
}

export default App;

 

결과는 위에서 실습했던 사진과 동일하다.