React 의 특장점, 렌더 라이프사이클 및 Hook(1) - JSX문법

JSX 문법

• 주석: `{/ /}`
• XML이기에 명시적으로 닫는 태그 필수: `/>`

JSX:(JavaScript Xml, Java Syntax eXtension): JSX는 겉으로만 보면 JS와 XML의 짬뽕

HTML or XML + JS + CSS 모두 하나의 .jsx 파일 내 존재

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
    </>
  )
}

export default App

 

jsx는 결국엔 js로 변환되어 웹 브라우저 내 실행되어야하여 Babel에 의해 js로 컴파일되는 과정을 거친다.

 

const element = <h1 className="greeting">Hello, world!</h1>; // this is jsx

위 jsx가 babel에 의해 아래 js로 컴파일

const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');

 

✅ JSX의 제약사항

js 특성과 XML 특성 모두를 혼재하여 갖고 있어서 아래와 같은 제약사항이 있다.

1. JSX는 무조건 하나의 요소로 반환되어야하기에, 여러 요소를 작성하려면 하나의 태그로 감싸야한다.

<div>
	<h1>오늘의 할 일</h1>
	<ul>
		<li>빨래하기</li>
		<li>숙제하기</li>
		<li>1시 약속</li>
	</ul>
</div>

// 감싸주는 노드를 사용하고 싶지 않을 경우 Fragment를 사용
<React.Fragment>
</React.Fragment>
// or
<>
</>

 

2. `class`가 ES6(JS)의 클래스 문법의 예약어이기에 대신 `className` 사용

<div className="container">
</div>

 

3. JS로직(변수나 함수)을 넣기 위해서는 중괄호 열어서 그 안에 JS로직을 넣어야한다.

function Container({ children }) {
	const title = '오늘의 할 일';
	
	return (
		<div>
			<h1>{title}</h1>
			{children}
		</div>
	)
}

 

4. React Componet(Element)가 JSX로 작성되면 대문자로 시작해야한다.

소문자로 시작하는 Element는 HTML Element로 인식

function TodoList() {
	return (
		<Container>
			<div>
				<span>1</span>
				<span>2</span>
				<span>3</span>
			</div>
		</Continer>
	)
}

5. 조건부 렌더링은 if문이 아닌 삼항연산자를 사용

function TodoList() {
	const todoList = []
	return (
		<Container>
			<div>
				{todoList.length > 0 ?
					todoList.map(todo => <div key={todo.id}>{todo.value}</div>)
				: "새로운 할 일을 입력해보세요."}
			</div>
		</Continer>
	)
}

+ 여러 HTML엘리먼트를 표시할 때는 `map`함수 사용

map함수를 사용 시 반드시 key 속성 표시 필수, 그렇지 않으면 경고 표기