1. React

JSX

우선 React를 하게된다면, JSX라는 언어를 하여야한다. 
React라고해서 절대 어려운게 아니다. 기존처럼 HTML / CSS 짜서 웹 페이지 만들어 나가면 끝! 

대신 HTML 말고 JSX를 쓰는데 JSX가 뭔데 그래서?

JSX JavaScript eXtension의 줄임말로써 HTML태그 (div, h1, h2 등)들을 자바스크립트 소스코드 안에 사용하는 것을 뜻한다.
JSX로 작성된 코드들은 빌드될 때, Babel이 자바스크립트 코드로 변환시켜준다.

정리하여서 JSX 문법

1. class 넣을 땐 className

2. 데이터 바인딩 & 변수 꽂기 { 변수 명 }

3. style 넣을 땐 style= {{이름 '값'}}

state ? 자료 잠깐 저장할 땐 state 쓰기

1. import { useState }
2. useState(보관할 자료)
3. let [작명,작명]

Destructuring 문법?

• let [ a , c ] = [ 1 , 2 ]

왜 state 써야하는가?

• 일반 변수는 갑자기 변경되면 html 자동으로 반영이 안됨

• state는 갑자기 변경되면 바로 자동으로 반영해줌 즉, 자동 재 렌더링!

• 변동시 자동으로 html에 반영되게 만들고 싶으면 state 쓰기!

정말쉬운 정리 ↓

자주 변경될거 같은 html 부분은 state로 만들어 놓기

state의 특징

• 기존 state == 신규 state의 경우 변경 안해줌

warning 없애기

/_eslint-disable_/

• js파일 최상단 추가하기! 이러한것이 Lint 끄는 기능

onClick || state 변경하는법?

1. 함수 이름을 넣어야함. 문법을 바로 넣어도 상관은 없음!

• onClick={ 함수를 넣어야함! }

2. state 변경? 변경함수를 넣아야함

state변경함수(새로운state)
<span
     onClick={() => {
        setlike(like++);
        }}
    >

+ 배열을 변경하려면 spread 문법

원본 데이터를 새로운 변수로 저장한 다음에 변경하고싶은것만 변경하는 문법으로, 원본을 보존하는 방법이다.
이러한 방법은 아래와 같다.

let [title, b] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "여자 신발 추천",
  ]);

  function setDate() {
    let copy = [...title];
    copy[0] = "여자 코트 추천";
    b(copy);
  }

• state가 array / object면 shallow copy를 만들어서 수정하자