2024.05.13 Today Yoonsung Learned

TIL

React 스탠다드 강의

1. 리액트 프로젝트 셋업 (Vite)

• 리액트 Boilderplate설치(프로젝트 셋업)

/* Vite으로 프로젝트 셋업 */
yarn create vite

/* 프로젝트 폴더로 이동 */
cd [프로젝트폴더명]

/* vscode로 프로젝트 열기 */
code .

2. JSX란

• 리액트 컴포넌트 구조를 표현할때 사용
• JSX 안에서의 {} 에는 표현식만 기입 가능
  • 값으로 평가될 수 있으면 표현식
  • 표현식의 특징은 변수로 할당이 가능함
• JSX는 JS로 변환된 후 실행할 수 있음
  • esbuild

3. useState 동작

• 상태(state)가 바뀌면 다시 렌더링 (상태변경 -> 리렌더링)

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>현재 count</h1>
      <h2 style={{fontSize: 50}}>{count}</h2>
      <button onClick={() => setCount(count + 1)}>+1</button>
      {" "}
      <button onClick={() => setCount(count - 1)}>-1</button>
    </>
  )
}

export default App