JSX

1. 클래스는 className으로 바꿔준다.

2. 데이터바인딩시 { 변수명, 함수 등 } 중괄호 사이에 넣어주면 된다.

3. CSS 속성을 직접 활용할 때는 객체 형태의 데이터로 입력해 준다.

   예시. { color : 'blue', fontSize : '30px' }

4. CSS속성을 직접 활용 시 '-'이 있다면 Javascript 연산자 - 와 혼동할 수 있기때문에
   camel표기법으로 표시해준다.

   예시. font-size -> fontSize

---

State

State란?

1. 변수 대신 쓰는 데이터 저장공간
2. useState()를 이용해 만들어야함.
3. 문자, 숫자, array, object 다 저장 가능
4. 사용시 App.js 상단에 import { useState } from 'react';작성한다.
   (리액트 안에 내장함수 useState를 불러오겠다라는 의미)

state에 데이터 저장해놓는 이유

웹이 App처럼 동작하게 만들고 싶어서
state는 변경되면 HTML이 자동으로 재렌더링이 된다.
(새로고침 없이도 HTML에 렌더링됨.)

---

useState()

구조분해

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

예시

let [a, b] = [10, 100];
a = 10;
b = 100;

useState 활용 예시

---

버튼 & 이벤트 활용하기

사용법

onClick= { 실행할 함수명 }
onClick= { () = > { 실행할 내용 } }

Deep copy

state에 있는 배열을 구조분해 문법을 활용해 deep copy를 한 후,
복사된 새로운 배열에 변경사항을 적용해 준다.
마지막으로 state변경함수에 넣어준다.

---

참고 : 코딩애플

---