React.js 기초강좌2 JSX를 알아보자

안녕하세요 엘빈입니다. 저번 포스팅에서 react에 대한 기초적인 환경 설정을 하였습니다. 이제 본격적으로 react가 무엇인지 알아봐야겠죠? 이번 포스팅에서는 react에 핵심인 JSX에 대해서 알아보겠습니다. 

 

 

 

 

 

---

포스팅은 "React를 다루는 기술" 책을 바탕으로 정리 및 요약식으로 작성되었습니다.

 

1. JSX란?

 

JSX는 자바스크립트 문법을 확장시킨 개념입니다. 프로그래머가 더 편리하게 소스 코드를 작성할 수 있도록 도와주죠. JSX는 리액트 용으로 공식 자바스크립트 문법은 아니지만 HTML과 비슷하고 좋은 가독성으로 인해 많은 사람들이 애용하고 있습니다. 

 

 

 

2. JSX 문법

 

JSX는 자바스크립트 확장 문법입니다. 문법인 만큼 사용하는데 몇 가지 규칙을 준수해야 합니다.

 

(1) 꼭 부모 요소 하나로 감싸야 한다

import React, {Component} from 'react';
import './App.css';
 
class App extends Component{
  render(){
    return (
      <h1>Hello world</h1>
      <h2>This is the Test</h2>
    )
  }
}
 
export default App;
 

위와 같은 소스코드로 작성하면 에러가 발생합니다. 모든 JSX 문법은 부모 요소 하나로 감싸야 합니다. 

 

위 코드는 여러 요소가 독립적으로 작성되어 있습니다. 부모 요소 하나로 감싸게 아래와 같이 수정할 수 있습니다.

import React, {Component} from 'react';
import './App.css';
 
class App extends Component{
  render(){
    return (
    <div>
      <h1>Hello world</h1>
      <h2>This is the Test</h2>
    </div>
    )
  }
}
 
export default App;
 

우분투 창에 'yarn start'로 실행하면 다음과 같은 웹페이지를 볼 수 있습니다.

 

 

 

(2) 자바스크립트 표현

 

JSX안에는 자바스크립트 표현식을 사용할 수 있습니다. 사용하는 방법도 정말 간단합니다. 단순히 코드 앞에 중괄호를 붙여주면 되죠.

import React, {Component} from 'react';
import './App.css';
 
class App extends Component{
  render(){
    const text = "Hello World";
    return (
    <div>
      <h1>{text}</h1>
      <h2>This is the Test</h2>
    </div>
    )
  }
}
 
export default App;
 

render 함수 안에 변수를 선언하고 초기화 한 뒤에 요소 안에 중괄호를 넣어 변수를 삽입해주면 됩니다.

 

 

 

 

(3) JSX의 특별한 조건부 연산자

 

JSX에서는 if문을 사용할 수 없습니다.

 

그렇기 때문에 JSX에서 조건문을 사용하기 위해선 삼항 연산자를 사용해야 합니다.

import React, {Component} from 'react';
import './App.css';
 
class App extends Component{
  render(){
    const text = "Hello World";
    const props = true;
    return (
    <div>
      <h1>{text}</h1>
      <h2>{props ? 'This is the props' : 'false'}</h2>
    </div>
    )
  }
}
 
export default App;
 

위와 같은 형식으로 작성하면 됩니다. 조건식이 참일 경우 앞에 코드를 거짓일 경우 뒤의 코드를 수행합니다.

 

 

참일 경우만 고려하고 싶을 경우 '&&' 연산자를 사용하면 됩니다. 이럴 경우 11번째 코드만 아래와 같이 바꾸면 됩니다.

 

{props && 'This is the props'}

 

 

(4) 인라인 스타일링

 

인라인 스타일링은 자바스크립트 표현식을 이용해 스타일 속성을 객체 형식으로 만들어 css 대신 적용할 수 있습니다. 

import React, {Component} from 'react';
import './App.css';
 
class App extends Component{
  render(){
    const text = "Hello World";
    const props = true;
    const style = {
      backgroundColor : 'yellow'
    };
    return (
    <div style = {style}>
      <h1>{text}</h1>
      <h2>{props ? 'This is the props' : 'false'}</h2>
    </div>
    )
  }
}
 
export default App;
 

위와 같이 style 속성에 자바스크립트 객체 변수를 대입하면 해당 스타일로 웹페이지가 표시됩니다.

 

 

위 코드의 결과물은 사진과 같습니다. div 요소 전체적인 배경색이 바뀐 것을 알 수 있습니다.

 

자바스크립트 객체에서는 '-' 기호를 사용할 수 없으므로 -가 들어가는 대신 붙여 대문자로 구분짓습니다.

 

 

(5) class 대신 className

 

html을 공부할떄 css를 적용하기 위해선 class 키워드를 사용한다고 배웠을 것입니다. 

 

하지만 JSX에서는 clss 대신 className 키워드를 사용합니다. 왜냐하면 class는 이미 자바스크립트에서 사용하고 있기 때문에 구분 짓기 위해서 className을 사용합니다.

 

키워드 이름이 바뀌었다고 해서 class와 다른점은 없습니다. 그저 JSX에서는 class 대신 className으로 사용한다는 점만 알아두세요.

 

<div className = "my-div">

 

위와 같은 형식으로 사용하면 됩니다.