[React] JSX 문법, State 변경, onClick 정리

JSX 문법

• class 넣을 땐 className
• css파일 쓰려면 상단에서 import 'css파일경로'
• 변수 넣을땐 {중괄호} 안에 넣음, id, className, innerText 등 다양하게 사용가능함

  데이터바인딩

• style 넣을 때는 style={} 형식으로 작성
  style = { {color : 'red', fontSize : '16px'} }
• style 속성 이름
  font-size ➡️ fontSize 처럼 카멜케이스로 작성
• return () 안에는 반드시 하나의 태그로 감싸져있어야함, 병렬로 2개 이상 금지

---

State

• 자료를 잠깐 저장할 때 사용함 (그냥 변수를 써도 됨)
• 사용하기 전 import { useState } from 'react';
• let [보관한 자료가 담길 변수명, state 변경 함수명] = useState(보관할 자료);

  getter, setter로 생각하면 편함

• destructuring
  : useState의 결과가 [?,?]의 배열 형태
  각각의 네이밍을 위와 같이 한다고 생각하면 됨 (변수로 빼서 쓰겠다는 뜻👀)
• state는 변경될때마다 html이 자동으로 재렌더링
• 언제쓰냐?

  변경시 자동으로 html에 반영되게 만들고 싶을 때!

• 자주 변경될 거 같은 html 부분을 state로 만들어두면 좋음
  ex) 글제목, 날짜, className 등

---

클릭이벤트

• 태그 안에 onClick = {}

• {} 안에는 함수 이름을 넣음

• 함수 만드는 문법을 바로 넣어도 상관없음

  <span onClick={ () => { console.log(1) }}></span>
  

• 대체로 arrow function을 쓴다

---

State 변경

• State를 그냥 등호(=)로 변경하면 html에 반영이 안됨
• State 변경함수(새로운state값) 방식으로 사용
• State 변경함수를 사용해야만 재렌더링됨👍

---

터미널 에러메세지 무시하기

• 최상단에 /*eslint-disable*/

---

오늘 한 거

• useState 선언할 때 배열 형식으로 넣고, 꺼내서 게시글 제목, 내용 작성
• 좋아요, 댓글 span에 onClick 이벤트 넣어서 클릭시 State를 1씩 증가되도록
• 밑에 Rotate 버튼을 만들어서 누를 때마다 제목-내용-좋아요-댓글 세트가 회전되도록 이벤트 작성