JSX
덕구공
JSX리액트 기초/개발환경 + JSX + Component2021. 7. 7. 07:49@덕구공
Table of Contents

우선..

  • 아래 링크를 참고하여 리액트 프로젝트를 생성하자.

https://duckgugong.tistory.com/172

 

 

React 개발환경 설정

VS Code React 코드 편집기로 사용할 개발환경 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platfor..

duckgugong.tistory.com

JSX ?

  • 리액트에서는 딱 하나의 빈껍데기인 html 파일만 존재한다. 어떤 뷰를 나타낼만한 태그들이 하나도 없다.  
    • public 폴더 아래에 있는 index.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>
  • src 폴더 안에 app.js 파일을 열면 function App()안의 리턴되는 요소들이 화면에 나타나는 것을 알 수 있다.

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;

  • 리액트는 빈껍데기 html 파일 하나만 있지만 App.js 에서 보이는 것과 같이 자바스크립트 함수 안에 리턴해주는 html 태그 처럼 생긴 요소들로 뷰를 꾸린다. 
<div className="App">
  • 이런 방식을 HTML in JS 방식이라고 부르고 이걸 JSX라고 부른다. 리액트에서 사용하는 문법이다.
  • html에 하나 밖에 없는데 페이지 전환이 될까? 라는 생각을 할 수 있지만 이 JSX 문법을 통해서 위의 app.js 파일에서 보이는 function App()과 같이 함수들로 만들어진 함수형 컴포넌트를 만들어서 빈껍데기 HTML에 필요한 것만 올려서 페이지를 구성한다.
  • 즉, JSX 문법을 사용해서 리액트 요소를 만들고 DOM에 렌더링 시켜서 화면을 그린다.
  • 이런 방식을 SPA(Single Page Application)이라고 부른다.

 

  • 아래 같은 HTML 태그는 일반적인 js 파일 안에서 사용할 수 없다.
<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>
  • 그래서 나온게 JSX이다.
  • JSX와 같은 확장된 자바스크립트 문법에서만 자바스크립트 안에서 HTML 태그랑 비슷하게 생긴 마크업을 넣어 뷰 작업을 편하게 할 수 있다.
  • 아래처럼 어떤 변수를 선언하고 HTML 태그랑 비슷하게 생긴 마크업을 넣을 수 있다.
const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;
  • 즉, 아래와 같은 것은 HTML 태그가 아닌 리액트 요소이다
<div className="App">
  • 파이썬과 같이 import 하는 부분도 그냥 자바스크립트에서는 이런식으로 사용할 수 없다.
  • 오직, JSX와 같이 자바스크립트를 확장시킨 문법에서만 사용할 수 있다.
import React from 'react';
  • 파일을 다른곳에서도 사용할 수 있도록 export하는 부분도 JSX에서만 사용할 수 있다.
export default App;

JSX 사용법/규칙

  • 우선 개발자 도구를 열고 App.js 파일을 열어서 <div className="App"> ~ </div> 사이의 내용을 모두 지워서 아래처럼 만들고 yarn start 명령어로 프로젝트를 실행시켜보자.
import React from 'react';
import './App.css';

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

export default App;
  • 아래처럼 아무것도 없는 화면이 나타날 것이다.

JSX 규칙

1. 태그 꼭 닫기.

  • 아래처럼 태그의 끝에 />를 해주지 않으면 JSX 문법에 맞지 않는다고 에러가 발생한다.
  • HTML에서는 에러가 발생하지 않는다.
// input 태그를 닫지 않고 넣어볼거예요!
function App() {
  return (
    <div className="App">
      <input type='text'> 
    </div>
  );
}

  • 아래처럼 input 태그의 마지막 > 전에 /를 넣어서 태그를 닫으면 정상적으로 화면이 그려진다.
function App() {
  return (
    <div className="App">
      <input type='text'/> 
    </div>
  );
}

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

  • 아래처럼 컴포넌트에서 최상위 엘리먼트 두개를 반환하면 에러가 발생한다.
function App() {
  return (
    <p>duck</p>
    
    <div className="App">
        <input type = 'text'/>
    </div>
  );
}

  • 아래와 같이 최상위 엘리먼트를 하나만 반환해야 오류가 발생하지 않는다.
function App() {
  return (
    <div className="App">
        <p>duck</p>
        <input type = 'text'/>
    </div>
  );
}

3. JSX에서 javascript 문법을 사용하려면 중괄호 사용

  • JSX에서 javascript의 변수 값이나, 문법을 사용하려면 중괄호로 감싸서 사용해야 한다!
function App() {

  const name = 'duck'
  return (
    <div className="App">
        hello {name}
        <p>{name === 'duck' ? '안녕' : '저리가'}</p>
    </div>
  );
}

4. className

  • JSX로 작성하는 태그 내에서 클래스 명을 정할 땐 속성값을 HTML과 다르게 class 대신 className을 사용한다.
  • id는 그냥 id로 사용!
<div className="App">

 

5. inline으로 style 부여하기

  • HTML에서 사용하는 css 문법 대신 json 형식으로 스타일을 넣어준다.

 

HTML

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

JSX

//중괄호를 두번 쓰는 이유는 json도 자바스크립트이기 때문!
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
  • 아래처럼 스타일 json을 변수로 만들고 사용할 수 있다!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

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

 

'리액트 기초 > 개발환경 + JSX + Component' 카테고리의 다른 글

Component, props  (0) 2021.07.07
React 개발환경 설정, 프로젝트 만들기  (0) 2021.07.07
덕구공
@덕구공 :: Duck9s'

주니어 개발자에욤

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

리액트 기초/개발환경 + JSX + Component 추천 글
more
image

티스토리툴바