JSX

1.JSX란?

 

컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있다.

이렇게 함수로 만들어진 컴포넌트르 html 태그 사용하듯이 코드를 작성하는 이 방식을 JSX라고 한다.

// import [패키지명] from [경로] 이 형식으로 불러와요.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
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 파일만 존재한다.( public 폴더 아래에 있는 index.html )

그럼 리액트에서는 어떻게 뷰를 그릴까?

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.

 

HTML을 품은 JS === JSX라고 할 수 있다.

원래 다음과 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.

<div>
	<h1>안녕하세요!</h1> 
	<p>OOO입니다</p>
</div>

 

그래서 나온게 JSX이다.

자바스크립트 파일 안에서 html 태그같은 마크업을 넣어 뷰 작업을 편하게 할 수 있게되었다.

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>OOO 입니다.</p>
  </div>;

 

2.JSX 사용법

 

2-1.태그는 반드시 닫아줄 것

 

잘못된 예시)

import React from 'react';

// input 태그를 닫지 않고 넣어볼 것이다
function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

export default App;

위와같이 입력하면 오류가 발생한다. 

JSX 내에서 태그를 사용할때는 반드시 닫아주어야 한다.

 

input 태그를 아래와 같이 닫아보자.

<input type='text'/>

옳은 예시)

import React from 'react';

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

export default App;

 

2-2.컴포넌트 안에는 한개의 엘리먼트만!

 

잘못된 예시)

import React from 'react'; 

function App() {
  return (
    <p>안녕하세요!</p>

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


export default App;

다음과 같이 입력하면 오류가 나는 것을 볼 수 있다.

return안에는 각각 p태그와 div 태그가 따로 놓여져 있다. 즉,엘리먼트가 2개로 놓여진 것이다.

 

하지만 하나의 컴포넌트 안에는 한개의 엘리먼트만 가질 수 있다. 

따라서 아래와 같이 바꿔주면 정상출력 되는 것을 볼 수 있다.

 

옳은 예시)

import React from 'react'; 

function App() {
  return (

    <div className="App">
          <p>안녕하세요!</p>
      <input type='text'/>
    </div>
  );
}


export default App;

<div> 태그안에 <p>태그를 넣어 엘리먼트를 하나로 통합시켜준 모습.

 

2-3.JSX에서 javascript 값을 가져오려면?

 

중괄호를 쓰면된다.

 

import React from 'react'; 

function App() {
	const cat_name = 'perl';
    return (
      <div>
        hello {cat_name}!
      </div>
    );
}


export default App;

hello {cat_name} => hello perl 로 출력될 것이다.

 

중괄호를 이용해서 자바스크립트 문법도 사용할 수 있다.

import React from 'react';

function App() {
  const number = 1;

  return (
    <div className="App">
      {/* JSX 내에서 코드 주석은 이렇게 쓴다 */}
      {/* 삼항 연산자를 사용 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

1은 10보다 작다 가 출력될 것이다.

 

2-4.class 대신 className

<div className="App">

JSX로 작성하는 태그 내에서 클래스 명을 정해줄 때는 속성 값을 class 대신 calssName으로 사용한다.

id는 그냥 id를 사용.

 

2-5.인라인으로 style 주기

html 태그에 스타일을 직접 넣던 것과 비슷하다.

 

방법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>
  );
}