[강의] 학습중...

- JSX 3가지 문법
1. 태그에 class를 주고 싶으면?
<div className = "클래스명">

2. 리액트에서는 데이터 바인딩(데이터를 HTML에 꽂아넣는 것)을 쉽게 할 수 있음
src, id, href 등의 속성에도 {변수명, 함수 등}: 중괄호 사용

3. JSX에서 style 속성 집어넣을 때는
style = {object 자료형({})으로 만든 스타일}
-> 귀찮으니 className쓰자...

camelCase작명관습에 따라 속성명을 바꿔줘야 함(font-size-> fontSize)




- useState(변수말고 데이터를 저장할 수 있는 또 하나의 방법 - state)
데이터는 
1. 변수에 넣거나
2. state에 넣거나

리액트의 데이터 저장공간 state만드는 법
1. { useState } 상단에 첨부
import React, { useState } from 'react'; -> react에 있는 내장 함수 하나를 쓰겠다.
2. useState(데이터);

  useState('남자 코트 추천'); 이런 식으로 데이터를 저장하는 공간을 만들면 이 자리에 안에 2개의 데이터가 들어있는 array가 남음
[a, b] a는 데이터(남자 코트 추천)가 들어감, a 데이터를 수정하기 위한 함수를 생성해줌(남자 코트 추천state정정해주는 함수)
[state 데이터, state 데이터 변경 함수]

 let [a,b] = useState('남자 코트 추천'); //a랑 b라는 변수를 만들겠습니다. 그런데 useState에 있던 그 두 개의 데이터를 각각 집어넣어주세요.
-> 자바스크립트 ES6 신 문법(destructuring 문법)
array, object에 있던 자료를 변수에 쉽게 담고 싶을 때



state는
1. 변수 대신 쓰는 데이터 저장공간
2. useState()를 이용해 만들어야함
3. 문자, 숫자, array, object 다 저장가능

그렇다면... 그냥 변수쓰면 되지 왜 굳이 state를 만들까??
state에 데이터 저장해놓는 이유: 웹이 App처럼 동작하게 만들고 싶어서
=> state가 변경되면 HTML이 자동으로 재렌더링이 된다!! = HTML이 새로고침 없이도 스무스하게 변경됨
제목을 정렬하든가 수정하든가 했을 때 새로고침 없이도 HTML에 렌더링 된다.

자주 바뀌는 , 중요한 데이터는 변수 말고 state로 저장해서 쓰기!



터미널에 뜨는 warning (에러는 아님): eslint가 잡아주는 문법 체크사항
만약에 eslint를 보기 싫으면 -> /* eslint-disable */를 App.js 맨 위에 추가


크롬에서 우클릭하면 이모지를 사용할 수 있음

- 이벤트 다루는 법
옛날 자바스크립트
onClick = "클릭될 때 실행할 JS"

리액트
onClick = {클릭될 때 실행할 JS(무조건 함수)}
함수를 바로 만들고 싶다면 onClick = { ()=>{실행할 내용} }  사용




state는 그냥 변경 안 됨. -> useState로 따봉이랑 같이 만들었던 따봉변경() 함수 이용
따봉변경(대체할 데이터) -> 대체를 해버리는 함수