FE/React
-
React의 State 업데이트 큐FE/React 2025. 10. 23. 14:13
🧑🏻💻React의 State 업데이트 큐(Queue)🚀 BatchReact는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다림 이를 통해 너무 많은 리렌더링이 발생하지 않고도 여러 컴포넌트에서 나온 다수의 state 변수를 업데이트 가능.하지만 이벤트 핸들러와 그 안에 있는 코드가 완료될 때까지 UI가 업데이트되지 않는다 따라서 React가 여러 상태 업데이트를 단일 리렌더링으로 그룹화하여 성능을 향상하는 것!! 🖥️ 예시 코드import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {nu..
-
UI 표현하기FE/React 2025. 10. 23. 14:07
React 는 사용자 인터페이스(UI)를 렌더링하기 위한 JS 라이브러리버튼, 텍스트, 이미지와 같은 작은 요소 로 구성React를 통해 작은 요소들을 재사용 가능하고 중첩할 수 있는 컴포넌트로 조합가능🧩 ComponentReact 애플리케이션은 컴포넌트라고 불리는 독립된 UI 조각들로 이루어짐 React 컴포넌트는 마크업을 얹을 수 있는 JavaScript 함수마크업, CSS, Javascript를 앱의 재사용 가능한 UI 요소인 사용자 정의 컴포넌트로 조합 ↗️ 컴포넌트 import / export컴포넌트의 가장 큰 장점은 재사용성이다.컴포넌트를 조합해 또 다른 컴포넌트를 만들 수 있다.컴포넌트를 이렇게 여러 번 중첩하면 다른 파일로 분리해야 하는 시점이 있다.분리를 하여 파일을 더 찾기 쉽고 재사..
-
React 개요FE/React 2025. 10. 23. 13:53
🧑🏻💻 React는 무엇인가Javascript 라이브러리로 Github 10만개가 넘는 별점을 가진 인기 있는 라이브러리중 하나React는 프레임워크가 아니다 ❌Facebook이 만든 오픈소스 프로젝트프런트엔드에서 사용자 인터페이스(UI)를 구축하는데 사용MVC 애플리케이션(Model-View-Controller)의 뷰 계층 ⭐ React에서 가장 중요한 측면사용자 인터페이스를 빠르고 효율적으로 구축하기 위해 사용자 정의 및 재사용 가능한 HTML 요소인 컴포넌트를 만들 수 있다.state 와 props 를 사용하여 데이터 저장 및 처리 방식을 간소화 ⚙️ 설정 및 설치 📌 React를 설정하는 2가지 방법정적 HTMLReact 앱 만들기 1️⃣ 정적 HTMLjQuery와 같은 라이브러리를 사용..