(5)React_초급_JSX 문법2

● 이전 복습 (render 메소드 매개인자에 작성할 코드 문법) :

• 태그 + textContent는 html 문서처럼 작성한다.
• class 속성, for 속성 => className, htmlFor 으로 속성, 속성값 대입
• 태그의 이벤트 관련 속성 => 카멜 문법으로 속성 표기 //onClick , onMouseDown ..

● 또 다른 render() 의 JSX 코드 작성 문제 :

- 문제 : 상속 구조의 여러개의 태그는 작성 가능하지만. 연달아 여러 태그 작성은 불가능 하다.

ex_

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<p>안녕 시발아</p>
	<p>왜 욕질이야?</p>
    //연달아 2개 태그 => 오류 발생
)

- 해결 방법 :

○ 방법 1 : <> - </> 내에 연달아 작성 O

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <p>시발련아</p>
    <p>욕하지마</p>
  </>
);

○ 방법 2 : Fragment 태그 사용

import { Fragment } from 'react';//fragment사용을 위한 import
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Fragment>
  <p>시발련</p>
  <p>왜 욕해</p>
</Fragment>
);

◎ 연습문제 :

● 문제조건 :

앞으로 만들 가위바위보 게임을 간단히 JSX 버전으로 만들어 봅시다.

우선 아래 HTML 코드를 JSX로 옮겨 볼 건데요,

root 아이디를 가진 div 태그 바로 안에 h1 , button 태그가 배치되도록 해주세요.

 

다음 항목들이 제대로 구현되었는지 확인해 보세요!

11

1. h1 태그의 id 속성을 id="title" 로 작성했다.

2. button 태그의 class 속성을 className="hand" 로 작성했다.

3. 실행했을 때 불필요한 태그 없이 <div id="root"> 바로 아래에 h1 과 button 태그가 들어있다.

● 답 :

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1 id='title'>가위바위보</h1>
    <button className='hand' type='button'>가위</button>
    <button className='hand' type='button'>바위</button>
    <button className='hand' type='button'>보</button>
  </>
);

● 이외의 문법들 :

• 태그의 data-* 속성은 카멜 케이스 문법X , 기존 HTML 문법 그대로 작성

import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    상태 변경: 
    <button className="btn" data-status="대기중">대기중</button>
    <button className="btn" data-status="진행중">진행중</button>
    <button className="btn" data-status="완료">완료</button>
  </div>,
  document.getElementById('root')
);