JSX란?
- js 파일 내부에서 html 사용 방식처럼 사용하기 위한 문법
- style도 사용할 수 있음
<div style={{fontSize : "30px"}}
- 해당 방식으로 '-' 대신 대문자 사용, {{ }} 2개 사용
- id, class 지정 시 class 는 className으로 사용
- class는 React의 class 문법과 별개로 구분하기 위함
데이터 바인딩
const value = "테스트"
<div>{value}</div>
// 테스트 출력
state란?
- 변수 처럼 사용할 수 있음
- state가 변경 시 리 렌더링이 가능
- state 선언 시
import { useState } from 'react'
const [a, b] = useState([ val_1, val_2]) // 배열도 가능
// state의 a를 그대로 상태 변경할 수 없음
// state의 b를 가지고 a를 변경하는 함수로 사용하여야 한다.
- a는 배열의 내용을 가지고 있는게 아닌 배열의 주소를 가지고 있다.
- b를 통해 a의 데이터를 변경하고 싶을때는
- 변수를 하나 새로 만들어서
const testArray = [...a]
// 해당 방식으로 데이터를 펼쳐 받는 방식을 취해야한다.
이벤트 핸들러
<button onClick={}> </button>
// 해당 방식으로 사용 가능하다.
// 블럭 내부에 들어갈 내용은 단순 계산식 x
// 내부에 들어갈 내용은 선언된 함수 혹은, 함수 정의, 화살표 함수를 사용하여야한다.