useState란 컴포넌트 안에서 상태 값을 선언하고, 그 값을 변경할 수 있게 해주는 함수이다.import { useState } from "react";function App() { const [state, setState] = useState(0); // 0으로 설정 return ( {state} { setState(state + 1); }}>+ );}export default App 상태를 직접 바꾸면 안 되고 반드시 setLight() 같은 상태 업데이트 함수를 사용해야 한다.상태가 바뀌면 자동..
💻 Front/React
JSX란 확장된 자바스크립트의 문법을 의미한다. React의 return문 안에서는 반드시 하나의 부모 요소만 반환할 수 있다.그래서 여러 컴포넌트를 감싸는 하나의 부모 요소 역할이 필요한데, 불필요한 div를 만들고 싶지 않을 때 를 사용한다.// App.jsximport Header from "./components/Header.jsx";import Main from './components/Main.jsx';import Button from './components/Button.jsx';// ESM모드이지만 확장자 생략 가능import Footer from './components/Footer';function App() { // 스프레드 연산자 사용 const buttonProps = ..
index.html -> main.jsx (ReactDOM) -> App.jsx -> 브라우저에 출력 브라우저가 처음 로딩할 때 index.html을 읽는다. // main.jsximport { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'createRoot(document.getElementById('root')).render( ) App 컴포넌트가 화면에 렌더링된다.// App.jsxfunction App() { return ( Hello React with Vite! );}export default App;
Vite는 빌드 도구로 리액트 프로젝트 만들 때 사용하면 훨씬 가볍고 빠르게 환경을 설정할 수 있다.// 노드 설치 여부node -v//프로젝트 생성npm create vite@latest//패키지 설치npm install//개발 서버 실행npm run dev 폴더 구조는 다음과 같다.
리액트의 장점은 다음과 같다.1. 컴포넌트를 기반으로 UI를 표현한다.2. 화면 업데이트 구현이 쉽다.3. 화면 업데이트가 빠르게 처리된다. 리액트가 빠르게 처리되는 이유는 Virtual DOM(가상돔) 때문이다.진짜 DOM에서 수정하면 느려지는데 가짜 DOM에서 먼저 계산을 하고 진짜 DOM에서 일부분만 변경한다. 🔍 DOM (Document Object Model)웹 페이지 HTML를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할이다.쉽게 말해 브라우저가 화면에 그린 HTML를 JS가 건드릴 수 있는 객체로 만드는 것이다. 한 입 크기로 잘라먹는 리액트https://inf.run/FiFhg
