[React] React 자습하기 - JSX 개념과 쉬운 예제 살펴보기

React JSX 개념 정리

🐣 들어가기 전

해당 React Study는 아래 글에서 세팅한 프로젝트에서 진행 중입니다.

기본적인 Setting 내용을 보려면 아래글을 먼저 참고해주세요.

ordinary-code.tistory.com/33

[React]React 자습하기 - 1. 프런트앤드흐름과 React의 기본 개념

 

---

오늘은 이제까지 미뤄두고 사용했던 JSX에 대해 좀 더 공부해보기로 했다.

기본적으로 JavaScript에서의 변수로 넣을 수 있는 값은 String, Number, Array, Object 등이 주로 떠오른다.

 

하지만, 전 React 실습 중에서는 아래와 같은 코드들이 계속 보이게 된다.

아래와 같은 문법은 사실 문자열로 보기도 어렵고, HTML로 보기도 힘들다.

const sayHello = <h1>Hello, World!</h1>

 

 

 

JSX란?

JSX는 JavaScript를 확장한 문법이다.

React에서 UI가 어떻게 생겼는지를 설명하기 위해 사용하고 있다.

 

해당 문법은 공식적인 문법은 아니며,  React에서도 필수적으로 사용할 필요는 없다.

하지만, UI 관련 작업 시 가독성이 좋으며,

React 시 에러와 경고 메시지 등이 표시되어 디버깅 시 유리하다.

그리고, HTML을 다뤄본 개발자들에겐 너무 익숙한 문법이라 러닝타임도 없기 때문에 사용 시 매우 유용하다.

 

 

 

 

JSX 사용 방법

1️⃣ JSX 하나의 태그로 만들어준다.

JSX 사용할 경우 꼭 모든 Element를 감싸는 하나의 태그로 만들어줘야 한다.

같은 Level선에서 끝나는 태그가 2개일 경우 Filed to compile 오류가 발생하니,

반드시 가장 최상위 태그는 한 개가 되도록 감싸준다. 

 

잘못된 사용법

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, world!</h1><h4>This is React APP!</h4>;
    }
}

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

두가지 태그를 나열해서 작성할 경우 Compile Error가 생성된다.

올바른 사용법

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class HelloWorld extends React.Component {
    render() {
        return <div>
                    <h1>Hello, world!</h1>
                    <h4>This is React APP!</h4>
                </div>;
    }
}

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

JSX 전체를 감싸는 태그를 추가하니 정상작동하는 것을 볼 수 있다.

 

 

 

 

 

 

2️⃣ JSX 내부 태그는 반드시 닫아주기

HTML 코드와 비슷하여 혼동할 수도 있으나, JSX 태그의 경우 반드시 닫아주지 않으면 정상 작동하지 않는다.

예를 들어  <br> <img> 등 안이 비어진 태그가 있다면, 반드시 닫아주어야 한다.

HTML에서는 <br>, <hr> 태그 등은 닫기가 없어도 정상 작동하나, JSX 내부에서는 반드시  닫아주어야 한다.

 

태그를 닫지 않을 경우 마찬가지로 compile 오류가 난다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class HelloWorld extends React.Component {
    render() {
        return <div>
                    <h1>Hello, world!</h1>
                    <hr/>
                    <h4>This is React APP!</h4>
                </div>;
    }
}

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

<hr/>로 닫아서 실행 할 경우 정상작동하는 것을 볼 수 있다.

 

 

 

 

 

3️⃣ JSX 내부에 JavaScript 표현식을 넣는 게 가능하다.

JSX에서는 정적인 String 외 변수를 넣어 사용이 가능하다.

중괄호 안에 Javascript에서 선언한 변수 혹은 Javscript내에서 사용 가능한 표현 식들은 넣어 사용한다.

 

숫자 계산, object 객체 value 가져오기 혹은 간단한 변수 등을 연결할 수 있으며, 

더 넓게는 Function 호출 후 Return 값 까지도 표현이 가능하다.

 

다음은 JavaScript 표현식 중 object와 함수를 연결한 예시다.

user object의 key Vlaue를 가져오고 today() 함수를 통해 오늘 연월일을 가져와서 표시한다.

이렇듯 JSX 내부에 {}(중괄호) 안에 해당 javaScript 표현식을 적어 가져올 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const user = {
    firstName :'jina',
    lastName: 'kim'
}
function today() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let day = new Date().getDate();
    return year +'/' + month + '/' + day;

}
class HelloWorld extends React.Component {
    render() {
        return <div>
                    <h1>Hello, {user.firstName}{user.lastName}!</h1>
                    <h4>Today: {today()}</h4>
                </div>;
    }
}

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

함수와 객체에서 값을 가져와 JSX 안에 넣어서 호출한 결과

 

 

 

 

4️⃣ JSX javaScript 객체로 인식됩니다.

컴파일이 끝나면 JSX표현식은 정규 Javascirpt 객체로 인식되게 된다.

 

JSX는 return에서만 사용하는 것뿐 아니라,

Javascript변수에 할당도 가능하며, 

for문 if문 내부에서 함수 return 형식으로도 반환이 가능하다.

 

밑의 예시를 보자.

기존 today의 경우 return에서 javascript 문법으로 넘겨주던 것을 JSX로 변경하여 return 시켰고

sayHello()라는 function을 새로 만들어 각각 if문에 맞게 JSX를 return 시켜주는 것으로 변경시켰고,

해당 코는 아래처럼 잘 작동한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const user = {
    firstName :'jina',
    lastName: 'kim'
}
function today() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let day = new Date().getDate();

    const today = <h4>Today: {year} / {month} / {day}</h4>
    return today

}
function SayHello() {
    let time = new Date().getHours();
    if(time >= 17 || time < 6) {
        return <h1>Good Night!</h1>
    }else {
        return <h1>Good Morning</h1>
    }
}
class HelloWorld extends React.Component {
    render() {
        return <div>
                    <h1>Hello, {user.firstName}{user.lastName}!</h1>
                    {today()}
                    <h3>{SayHello()}</h3>
                </div>;
    }
}

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

 

JSX로 return 받은 결과값 실행결과

 

 

JSX 작동원리

마지막으로 조금 어려운 얘기이다.

그럼 기존에 JavaScript에 없던 JSX가 정상 작동하는 이유는 무엇인가?

 

JSX로 작성된 코드는 React 내부의 React.createElement()를 사용하여 웹에서 이해할 수 있는 형태로 변환된다.

물론 우리가 직접 React.createElement를 호출해서 똑같은 효과를 낼 수 있지만,

우린 좀 더 가독성이 좋은 JSX를 이용해서 작성하기 때문에, 아마 React를 하면서 우리가 직접 React.createElement를 호출하는 일은 없을 것이다.

 

React.createElement 사용법

React.createElement(component props,... children) 

 

작동 예시

만약 우리가 class이름이 hi이며 안의 내용이 Say Hello! 내용을 h1태그 형식으로 뿌려주는 JSX를 만들었다고 하면,

const sayHello  = <h1 className="hi"> Say Hello! </h1> 

내부적으로는 아래의 코드로 변경되어 컴파일된다.

React.createElement(
'h1',
{className : 'hi'},
'Say Hello!'
)

이런 식으로 JSX는 내부적으로 작동하나 우리는 이런 내부 사정은 잠시 미뤄두고

앞으로 JSX의 규칙에 맞춰 잘 사용하면 되겠다.

 

 

 

---

💁‍♀️ 해당 포스팅은 스터디를 하며, 작성된 포스팅으로 정확하지 않은 내용이 포함되어있을 수 있습니다.

부족한 점이 있다면, 댓글로 알려주시면 바로 수정하도록 하겠습니다.