[React.js] #1 JSX 기초 문법

시작하기 전에

해당 블로그에 작성되는 글은 주인장의 지극히 주관적인 생각이 다수이며, 대부분의 지식은 구글링을 통해 얻고 있기 때문에 옳지않은 정보가 있습니다. 

잘못된 부분이나 수정해야 하는 부분이 있다면 과감히 덧글을 남겨주세요! 모르는게 많은 새싹입니다

오늘의 주제

제대로 할 줄 아는건 없지만 이것저것 관심이 많기 때문에, 요즘은 친구들과 React 스터디를 진행 중 입니다.ㅎㅎㅎ 스터디에서 공부한 내용을 바탕으로

"리액트 무작정 따라하기" 시리즈를 포스팅 해보려 합니다. 간단하게 리액트의 개념을 잡을 수 있는 예제와 설명을 통해 포스팅을 진행하겠습니다.

오늘은 리액트 무작정 따라하기 1편 JSX 편이니 가벼운 마음으로 읽어주세요!

JSX란 무엇인가?

JSX란 javascript + xml을 합쳐서 만들어진 javascript extension syntax입니다. javascript의 거의 모든 기능을 제공합니다.

리액트에서 사용하는 문법(?)이며 React 요소를 생성하고 표현한는데 사용합니다. javascript안에서 마크업 코드의 작성이 가능하고 property를 바인딩 할 수 있습니다.

컴파일이 완료되게 되면 JSX로 작성한 구문들이 정규 javascript 함수로 호출이되고 Javascript 객체로 평가됩니다.

리액트에서는 컴파일시 bable 트랜스을 통해 JSX -> javascript로 변환하여 줍니다.

예제를 살펴보자!!!

$npm install create-react-app -g
$create-react-app tistory-jsx

create-react-app을 통해 간단하게 프로젝트를 생성하고 App.js 파일을 아래와 같이 만들어 주었습니다.

중간에 조잡한거 다 날려버리고, hello world!를 JSX문법으로 적어주었습니다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
​
class App extends Component {
​
  render() {
    return (
      <div className="App">
        <div className="test"> hello word! </div>
      </div>
    );
  }
}
​
export default App;

위에서 JSX로 작성된 코드는 컴파일시 바벨을 통해 표준 자바스크립트로 변환된다고 말씀 드렸었는데 한번 확인 해보도록 하죠. babel에 의해서 변환된 표준 javascript 코드를 확인 하기 위해서는 요기!로 이동해서 확인해봅시다.

"use strict";
​
React.createElement(
  "div",
  { className: "App" },
  React.createElement(
    "div",
    { className: "test" },
    " hello word! "
  )
);

자! return 부분을 넣고 돌리면 위와같이 babel 트랜스퍼가 JSX 코드를 javascript표준 문법으로 변환해 주게 됩니다.

JSX 규칙을 따르라!

JSX 방식으로 코드를 작성하기 위해서는 몇가지 규칙이 존재합니다.

• 모든 Element의 태그는 닫아주어야 합니다.
• Javascript를 사용하기 위해서는 중괄호({}) 를 사용해 줍니다.
• Style설정과 Class 설정이 기존의 HTML의 방식과는 약간 상이합니다.
• JSX안에서는 if문은 금지! 입니다. => 삼항 연산자(? :)와 AND연산자(&&)를 사용하여 조건처리를 합니다.
• 컴포넌트에서 여러개의 Element를 렌더링 할 때 하나의 Container Element로 묶어줘야 합니다.

대표적으로 위의 내용들이 기존에 사용하던 HTML 방식과는 다른 차이점 입니다. 이제 하나하나 예제를 통해 확인해 보도록 합시다.

1. 모든 Element의 태그를 닫아주자구욧-

  

두장의 사진은 input 태그 끝에 Element를 닫아준것 vs 안닫아준것의 차이입니다.

우측처럼 요소끝에 마감처리를 제대로 해주지 않으면 아주 컴파일러가 거들떠도 안보고 오류를 뿜뿜 내 뿜습니다.

HTML에서는 안닫아줘도 괜찮았는데...ㅠㅡㅠ 이게 바로 첫번째 차이점 입니다.

2. 컴포넌트에서 여러개의 Element를 렌더링 할 때 하나의 Container Element로 묶어줘야 합니다.

class App extends Component {
​
  render() {
    return (
      <div className="App">a</div>
      <div className="App">b</div>
      <div className="App">c</div>
      <div className="App">d</div>
      <div className="App">e</div>
    );
  }
}
# 컴파일러가 싫어함니다. Holy shit! 입니다.
​
class App extends Component {
​
  render() {
    return (
      <div className="IamContainer">
        <div className="App">a</div>
        <div className="App">b</div>
        <div className="App">c</div>
        <div className="App">d</div>
        <div className="App">e</div>
     </div>
    );
  }
}
# 정답입니다. 컴파일러가 좋아합니다.

3. Javascript를 사용하기 위해서는 중괄호({}) 를 사용해 줍니다.

class App extends Component {
  render() {
    const name = "my name is Dongsu!"
    return (
      <div>
        <div> Hello world! { name } </div>
      </div>
    );
  }
}
# 저렇게 name 변수에 할당한 문자열을 넣기위해서는 중괄호{}를 이용합니다.

4. JSX안에서는 if문은 금지! 입니다. => 삼항 연산자(? :)와 AND연산자(&&)를 사용하여 조건처리를 합니다.

class App extends Component {
  const flag = false
  render() {
    const firstName = "Lee"
    const lastName = "Dongsu"
    return (
      <div>
        <div> Hello world! { flag ?  fitstName : laseName } </div>
        <div> Hello world! { flag && fitstName } </div>
        <div> Hello world! { flag || lastName } </div>
      </div>
    );
  }
}
# 이렇게 사용해 주시면 되겠슴니다. 고갱님!

5.Style설정과 Class 설정이 기존의 HTML의 방식과는 약간 상이합니다.

class App extends Component {
  render() {
    const style = {
      fontSize: '30px',
      backgroundColor: 'yellow',
    }
    return (
      <div>
        <div style={style}> hello world!</div>
      </div>
    );
  }
}

한가지 덧붙여 말씀드리자면, JSX의 변수 내이밍은 CamelCase를 사용합니다. 위의 예제들 중에서 변수명이 좀 길다 싶은것들은 전부 CamelCase로 작성되었습니다. 이 또한 JSX에서 원하는 규칙이죠!
이렇게 JSX가 무엇인지? JSX는 어떤특징을 가지고 있는지 알아 보았습니다. 다음 포스팅에는 본격적으로 React를 다뤄볼 수 있는 Props와 State 그리고 React Life Cycle에 대한 포스팅을 진행하도록 하겠습니다.

안뇽!