2. 리액트, React, JSX 문법 소개

1. React란 무엇인가?

• 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 생성하기 위해 사용된다.
• 리액트는 싱글 페이지 애플리케이션(Single Page Application, SPA)이나 모바일 애플리케이션 개발에 사용될 수 있다.

2. JSX란?

• JSX란 JavaScript eXtension의 약자로 자바스크립트의 확장 버전이다.
• JSX는 HTML 태그를 자바스크립 코드 내부에 작성할 수 있는 버전이다.

3. JSX에 표현식 포함하기

App.js

function App2(){
    const name = 'yonghwan kim';
    const element = <h1>Hello, {name}</h1>;
    return (
        <div className="App">
            {element}
        </div>
    );
}

export default App2;

index.js

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

ReactDOM.render(
  <React.StrictMode>
    <App2 />
  </React.StrictMode>,
  document.getElementById('root')
);

위의 App2.js 파일에서 name 변수를 초기화 후 중괄호를 이용하여 name 변수를 사용할 수 있습니다. 이 중괄호 안에는  유효한 모든 자바스크립트 표현식(변수, 함수 등)을 넣을 수 있습니다.

 

4. JSX도 표현식입니다

컴파일이 종료되면, JSX 표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식됩니다. 즉, JSX를 조건문 및 반복문 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환이 가능합니다.

 

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

5. JSX 문법은 닫힌 태그가 필요합니다.

JSX 문법은 태그안이 비어있다면 바로 닫아주어야 합니다.

const element = <img src={user.avatarUrl}></img>;	// (x)
const element = <img src={user.avatarUrl} />;		// (0)

 

6. JSX 문법의 CSS 적용하기

App2.js

import "./App.css";


function App2(){
    const style = {
        backgroundColor : 'red',
        fontSize: '30px'
    };

    return (
        <div className="App">
            <h1 style={style}>Hello world</h1>
            <h1 style={{
                            backgroundColor:'yellow',
                            fontSize:'30px'
                        }}>Hello world</h1>
            <h1 className="textStyle">Hello world</h1>
        </div>
    );
}

export default App2;

App.css

.textStyle {
  background-color: blue;
  font-size: 30px;
}

1. 첫번째 방법은 변수를 선언후 객체 형태로 스타일 속성을 지정한다. 단, 자바스크립트는 하이폰을 사용할 수 없기 때문에 케멀케이스를 사용한다. (background-color -> backgroundColor)
2. 두번째 방법은 첫번째 방법에서 변수를 사용하지 않고 그대로 중괄호를 하나 더 넣어서 스타일 속성을 지정한 것이다. 두번째 방법에서 변수를 사용한 것이 첫번째 방법이다.
3. 세번째 방법은 css파일에 클래스 이름(textStyle)으로 따로 설정하고 className으로 해당 클래스 이름을 불러와 적용한 것이다.