JSX문법

• <div>태그는 꼭 닫혀야 한다.
• <Hello /> 셀프 클로징

• 두개 이상의 태그가 있을 떄에는, 가장 바깥에 <> 로 감싸준다.

<>
  <div>두개 이상의</div>
  <p>태그는 감싸자</p>
</>

• JS값을 보여줄 때는 중괄호로 감싸줘야한다.

const name = '이렇게';
return <div>JS값 보여줄 땐, {name}</div>

• JSX내부에서 스타일 값을 사용할 때는 객체형태로 넣어줘야지 작동한다.

const style = {
	background: 'gray',
}
return (
	<div style={style}>
  		<div className="my-style">
          </div>
		</div>
)

주석 사용하는 방법

return (
	<div>
  		{/*주석은 이렇게*/}
  		<input
  			// or like this
  		/>
  	</div>
)

조건부 렌더링

{isSpecial ? <b>*</b> : null}

• isSpecial값이 true값이면 *을 붙여주고 아니면 아무것도 아니다.

useState 사용하기

import React, { useState } from 'react';

function Counter() {
const [number, setNumber] = useState(0);

const onIncrease = () => {
	setNumber(number + 1);
};
  
const onDecrease = () => {
	setNumber(number -1);
};
  
return (
	<div>
  		<h1>{number}</h1>
  		<button onClick={onIncrease}>+1</button>
		<button onClick={onDecrease}>-1</button>
	</div>
      )
}

• number 라는 상태를 만들건데 이 상태의 기본 값은 0으로 하겠다.
• serNumber는 현재 상태를 업데이트하는 함수이다.

const onIncrease = () => {
	setNumber(prevNumber => prevNumber + 1);
}

• 여기에서 prevNumber라는 걸 선언하지 않았는데 어떻게 코드가 실행되는 건지 궁금하다.

React에서 input 상태 관리하기