본문 바로가기
리액트 (React)/React 기초

JSX 사용하기

by 후닝훈 2021. 8. 30.
반응형

JSX란?

- 리액트에서는 딱 하나의 빈껍데기인 html 파일만 존재한다.

- public 폴더 아래에 있는 index.html

- 리액트의 '뷰' 를 그리는 방법은, JSX를 통해 React 요소를 만들고 DOM에 렌더링 시킨다.

- 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

- 하지만 JSX는 사용 가능 하다. (HTML을 품은 JS === JSX)

- 아래는 리액트의 정식 홈페이지이다.

 

JSX 소개 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

빈 껍데기인 HTML (index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

 

JSX가 적용된 App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

반응형

 

JSX 사용법

 

1. 태그를 꼭 닫아주기

function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

 

결과

- 위 코드는 오류가 난다.

- input 태그를 살펴본다면 닫는 태그가 존재하지 않는다.

- 태그가 닫히지 않으면 오류가 발생하므로 반드시 닫아주도록 하자.

<input type='text'/>
//혹은
<input></input>

 

2. 무조건 1개의 엘리먼트만 반환하기

return (
    <p>외부 p 태그</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

 

결과

- Parsing error가 발생한다.

- 컴포넌트에서 반환할 수 있는 엘리먼트는 1개 이기 때문에 발생하는 오류이다.

return (
    <div className="App">
  	  <p>내부 p 태그</p>
      <input type='text'/>
    </div>
  );

 

3. JSX에서 javascript 값을 가져오는법

- 중괄호를 사용한다.

function App() {
  const number = 1;
  return (
    <div className="App">
      <p>안녕하세요!</p>
      {/* JSX 내에서 코드 주석 */}
      {/* 삼항 연산자를 사용 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

- if 문을 사용하려면 중괄호를 중복으로 사용해야하는데, 중괄호 안의 중괄호 방식의 문법은 가능하지 않다.

- 삼항연산자나 map 등을 이용하자.

 

4. class 대신에 className을 사용한다.

<div className="App">

- JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용한다.

 

5. 인라인으로 style 주기

기존 html 방식

<p style="color: orange; font-size: 20px;">orange</p>

 

JSX 방식

// 1
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
// 2
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

- 중괄호를 두 번 쓰는 이유 : 딕셔너리도 자바스크립트이기에.

 

간단한 텍스트 입력 화면 만들기

function App() {
  const styles = {
    border : '1px solid #eee', // 테두리
    padding : '20px',
    display : 'flex',
    width : '100vw', //화면배율 vw
    maxWidth : '400px', // 최대 커지는 길이
    margin : '30px auto',
    flexDirection : 'column'
  }

  return (
    <div className="App">
      <div style = {styles}> 
        <h1 style = {{color : 'green'}}>안녕하세요!</h1>
        <hr style = {{width : '90%'}}/>
        <p style = {{textAlign : 'center'}}> 이름 입력해 주세요. </p>
        <input type = "text"/>
      </div>
    </div>
  );
}

export default App;

 

결과

반응형
저작자표시 비영리 변경금지

'리액트 (React) > React 기초' 카테고리의 다른 글

Component - 클래스형 & state 넘겨주기  (0) 2021.08.30
Component - 함수형  (0) 2021.08.30
Component & State & Props의 기본개념  (0) 2021.08.30
React 개발환경 설정 및 프로젝트 생성, 코딩 룰  (0) 2021.08.26

관련글

댓글

티스토리툴바