[코드잇] 리액트 웹 개발 시작하기 (2)

1. 가위바위보 간단버전(1)

 

import ReactDOM from 'react-dom/client';

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

 

2. JSX에서 자바스크립트 사용하기 

 

import ReactDOM from 'react-dom/client';

const product = 'MacBook';
const model = 'Air';
const imageUrl =
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

function handleClick(e) {
  alert('곧 도착합니다!');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>{product +' '+model}</h1>
    <img src={imageUrl} alt="제품 사진" />
    <button onClick={handleClick}>확인</button>
  </>
  , document.getElementById('root'));

- JSX 문법에서 중괄호를 사용하면 자바스크립트 문법 사용 가능

- 중괄호안에는 자바스크립트 표현식만 사용 가능

- if문이나 for문 함수선언과 같은 자바스크립트 문장은 사용 불가 

 

 

 

3. 가위바위보 간단 버전(3)

 

import ReactDOM from 'react-dom/client';

const WINS = {
  rock : 'scissor',
  scissor : 'paper',
  paper : 'rock'
};

function getResult(left,right) {
  if(WINS[left] === right) return '승리';
  else if (left === WINS[right]) return '패배';
  return '무승부';
}


function handleClick() {
  console.log('가위바위보!');
}

const me = 'rock';
const other = 'scissor';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>가위바위보</h1>
    <h2>{getResult(me,other)}</h2>
    <button onClick = {handleClick}>가위</button>
    <button onClick = {handleClick}>바위</button>
    <button onClick = {handleClick}>보</button>
  </>
  , document.getElementById('root'));

 

 

4. JSX 문법

 

- JSX는 자바스크립트의 확장 문법

- 특징

 

 1) 속성명은 카멜 케이스로 작성

 

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <button onClick= ... >클릭!</button>,
  document.getElementById('root')
);

- 예외적으로 HTML에서 비표준 속성을 다룰 떄 활용하는 data-* 속성은 카멜 케이스가 아니라 기존의 HTML 문법 그대로 작성해야 함

import ReactDOM from 'react-dom/client';

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

 

2) 자바스크립트 예약어와 같은 속성명은 사용 불가 

 

- JSX 문법도 결국은 자바스크립트 문법이기 때문에, for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없음

- HTML의 for의 경우에는 자바스크립트의 반복문 키워드 for와 겹치기 떄문에 htmlFor로 작성

- HTML의 class 속성도 자바스크립트의 클래스 키워드 class와 겹치기 때문에 className으로 작성 

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <form>
    <label htmlFor="name">이름</label>
    <input id="name" className="name-input" type="text" />
  </form>,
  document.getElementById('root')
);

 

- Fragment

 - JSX 문법을 활용할 때는 반드시 하나의 요소로 감싸주어야 함 

 - Fragment로 감싸주면 의미없는 부모 태그를 만들지 않아도 여러 요소로 작성 가능

 - Fragment는 아래 코드처럼 빈 태그로 감싼느 단축 문법으로 활용 가능

import ReactDOM from 'react-dom\client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <p>안녕</p>
    <p>리액트!</p>
  </>,
  document.getElementById('root')
);