[React] 1. JSX

2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

 

본격적으로 React를 이용해 웹페이지를 만들어보자!

 

1. JSX

웹사이트의 뼈대를 구축할 때 html과 css를 이용하여 구성한다.

React라고 해서 다를 것은 없다! 똑같이 html과 css를 이용한다.

 

하지만 다른 점은 저번 포스트에서 다뤘던 것 처럼 js파일에 코드를 작성한다.

이것이 바로 JSX이다.

 

JSX(JavaScript XML)는 JS에 XML을 추가한 문법이다.

JSX에 XML 코드를 입력하면 브라우저에서 실행하기 전 바벨을 통해 일반 js형태의 코드로 변환된다.

 

 

App.js

import './App.css';

function App() {
  return (
    <div className="App">
    
      ...

    </div>
  );
}

export default App;

위와 같이 하나의 div 태그 만을 남겨놓고 시작해보자!

이는 App()에서 return하는 태그는 1개로 감싸져 있어야하기 때문이다.

App.js가 index.js의 render() 함수 안에서 호출이 되는데

이때 한 개의 태그로 감싸져 있어야하기 때문이다.

 

css 파일 적용은 위 코드에서 알 수 있듯 App.css를 import하여 활용한다.

 

이제 알아두어야 할 JSX의 문법 특징에 대해서 살펴보자.

JSX 문법 특징_1 ) Html 태그에 class를 부여할 때에는 className=' '

기존 html과의 차이점 중 하나는 class 선택자를 부여할 때 className을 이용해야한다는 것이다.

이는 JSX가 결국 JS이기 때문에 내부에서 클래스와 구분을 하기 위함이다.

 

JSX 문법 특징_2 ) 변수를 Html에 활용할 때에는 중괄호{  } 

js의 변수에 담겨있는 것을 Html에 적용하여 활용할 수 있다.

이때에는 중괄호에 데이터 바인딩하고 싶은 변수명을 담으면 된다.

{ 변수명 }의 형태이다!

 

 

App.js

import logo from './cat-face.svg';
import './App.css';

const author = "KASSID";

function App() {
  return (
    <div className="App">

      <div className="nav-container">
        <div className="nav">
          <div className="logo-container">
            <img className="logo" src={logo} alt="logo" />
          </div>
          <h1>{author} MUSIC</h1>
          <div className="title-container"></div>
        </div>
      </div>

    </div>
  );
}

export default App;

이미지 파일을 logo에 담고, 작성자 명을 author에 담았다. 그것을 활용한 예시이다.

 

 

JSX 문법 특징_3 ) 태그 내 style 직접 추가 style = { { 스타일 object } }

기존의 style="속성명: 값" 의 형태가 아닌

style={ {속성명: '값'} }의 형태이다.

 

이때 주의할 점은 속성명은 CamelCase로 작성해야한다는 것이다.

즉, font-size, font-weight와 같은 속성 들은 fontSize, fontWeight 등으로 바꾸어서 기입해야한다.

 

<div style={ {fonstSize: '1rem', color: '#333')} }>