✨ React 정리 - 2) JSX문법, State ✨

✔️ JSX 문법: HTML과 비슷한 사용방식을 제공하는 스크립트

1. className

jsx에서 class 대신 className을 사용한다

단, 브라우저에서는 class로 변경되어 보여진다

function App() {
  return (
     <h4 className="title">title</h4>  
    );
}

2. { 변수명 }

데이터 바인딩할 때 { 중괄호 } 를 사용한다

function App() {

  let post = '우리집 맛집 목록';
  
  return (
     <h4>{ post }</h4> 
    );
}

3. style= { { 스타일명 : '값'} }

style 속성 추가, {중괄호}로 스타일 속성 담기

function App() {
  return (
     <h4 style = { {color: 'red'} }>title</h4>
    );
}

---

✔️ State: 자주 변경될 것 같은 데이터를 저장하는 것

State 사용: let [변수명, 함수명] = useState(데이터 바인딩 할 코드)

import { useState } from 'react';

function App(){
 
  let [변수명, 함수명] = useState('남자 코트 추천');
  return (
        <h4>{변수명}</h4>
  )
}

사용하는 이유

state에 변동사항이 생길 때 state를 사용하는 html도 자동으로 재랜더링 하기 때문에

장점

UI기능 개발 편리, 웹 사이트가 부드럽게 동작

state 세팅

state를 변경하는 방법은 2가지 방법이 있다.
1) 직접 할당 :setStateFunciton(state +1)
2)함수를 할당:setStateFunciton(state => state +1) (함수의 첫번째 인자는 현재 state 이다) 선호!

현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1),
현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)

2번의 방식을 선호하는 이유

• 파라미터는 현재 값으로 보장되어있다.
• 다른 코드에서 예상치 못한 업데이트가 일어나는 경우 영향을 받지 않는다. (오류 가능성 제거)

---

onClick 이벤트 핸들러: <태그명 onClick = { 실행할 함수 }>: 태그 클릭 시 실행할 함수

함수를 재사용 해야할 때: 새로운 function 만들기
함수를 재사용 하지 않을 때: onClick 안에 만들기

function App(){
  
  function print1(){
    console.log(1)
  } // 재사용해야 할 때
  
  return (
     <div onClick={ print1 }> Hello </div>
	 <div onClick={ () => { console.log(2) } }> World </div> /* 재사용하지 않을 때 */
  )
}

---

State 변경: useState에서 선언한 함수명(새로운 state)

1. 클릭시 실행하고 싶은 코드를 onClick={함수} 이벤트 핸들러를 달아서 사용
2. state를 변경하려면 state변경함수 사용
3. state변경함수는 ()안에 입력한 값으로 기존 state가 변경될 수 있음
4. array/object state 수정시 최대한 원본을 유지하고 copy본을 만들어 사용하는 관습을 지키자

state 변경함수 동작원리

1. 기존 state와 신규 state 일치 판별 검사
2. 같으면 state 변경하지 않음
3. 같지않아야 state 변경

function App(){
  
  let [ like, likeChange ] = useState(0);
  return (
    <h4> { title[0] } <span onClick={ ()=>{ 
    like = likeChange(like + 1) } } >👍</span> { like }</h4>
  )
}

• copy본 제작 방식의 제목 변경 코드

<h4>{title[1]}</h4>
<button
	onClick={() => {
      const copyTitle = [...title]; // 스프레드 연산자를 사용해야 직접적인 값을 가지기 때문에 html 재랜더링이 가능하다
      copyTitle[1] = '강북 우동 맛집';
      titleChange(copyTitle);
    }}
    type="button"
>
	제목 변경
</button>