vite + react 첫 사용해보기[자신감up 실습11]

맨날  다른 리액트 앱 클론코딩할 때 가끔 보였던 jsx 파일이 이거였구나 생각이 들었다.

 

환경생성

 

폴더 생성 후,

> npm create vite@latest

 

아래의 과정을 거친다.

 

create-vite@5.1.0
Ok to proceed? (y) y
√ Project name: ... vite-project // 아무거나 상관없다.
√ Select a framework: » React
√ Select a variant: » JavaScript

---

실행

> code . 

 

후에 node모듈 설치.

>npm i   

---

vite + react 실행 코드

>npm run dev

---

렌더링 내용

각 버튼이 한 useState에서도 따로 동작함

---

코드

스프레드 연산자와 set상태변환함수의 요소값 사용을 통해서 이전 데이터를 모두 가져온 후,

필요한 부분만 초기화하는 코드

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

function App() {

  const [count, setCount] = useState(0)

  const [count2, setCount2]

  = useState({number: 0, isEmergency: false})

  const hctrlBtn2 = () => {

    setCount2((prevCount2) => {

      return {...prevCount2, number: prevCount2.number + 1};

    });

    setCount2((prevCount2) => {

      return {...prevCount2, isEmergency : !prevCount2.isEmergency};

    });

    console.log("isEmergency", count2.isEmergency)

  }

  return (

    <>

      <div>

        <a href="https://vitejs.dev" target="_blank">

          <img src={viteLogo} className="logo" alt="Vite logo" />

        </a>

        <a href="https://react.dev" target="_blank">

          <img src={reactLogo} className="logo react" alt="React logo" />

        </a>

      </div>

      <h1>Vite + React</h1>

      <div className="card">

        <button onClick={() => setCount((count) => count + 1)}>

          count is {count}

        </button>

        <button style={{backgroundColor: count2.isEmergency?"red":"green"}}

        onClick={hctrlBtn2}>

          count is {count2.number}

        </button>

        <p>

          Edit <code>src/App.jsx</code> and save to test HMR

        </p>

      </div>

      <p className="read-the-docs">

        Click on the Vite and React logos to learn more

      </p>

    </>

  )

}

export default App

 

---

코드 해석

1. count2: 객체 형태의 상태로, number와 isEmergency 두 속성을 가지고 있습니다. 이 상태는 두 가지 다른 방식으로 업데이트됩니다:
   • 첫 번째 setCount2 호출에서는 number 속성이 1 증가합니다. 여기서 스프레드 연산자(...)를 사용하여 prevCount2의 현재 상태를 유지한 채로 number 속성만 변경합니다.
   • 두 번째 setCount2 호출에서는 isEmergency 속성이 토글됩니다. 이 경우에도 스프레드 연산자를 사용하여 기존 상태를 유지하면서 isEmergency 속성만 업데이트합니다.

이 코드의 중요한 점은 setCount2를 연속적으로 두 번 호출한다는 것입니다. React의 상태 업데이트는 비동기적으로 일어나기 때문에, 두 번째 setCount2 호출 시 count2의 최신 상태가 반영되지 않을 수 있습니다.

 

이는 상태 업데이트가 배치되어 한 이벤트 루프에서 처리되기 때문입니다.

 

console.log("isEmergency", count2.isEmergency) 라인에서는 count2.isEmergency의 상태를 콘솔에 출력합니다.

하지만, 이 출력은 setCount2에 의한 최신 상태를 반영하지 않을 수 있습니다.

React의 상태 업데이트가 비동기적으로 일어나기 때문에, 이 로그는 상태 업데이트가 완료되기 전의 값을 출력할 수 있습니다.