IT개발/React5 [React] 나만 기억하고 싶은 용어 정리 State리액트 컴포넌트 내부에서 관리되는 상태로, 값이 변경되면 해당 컴포넌트가 다시 렌더링됨Props상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 전달되는 읽기 전용 데이터Context여러 컴포넌트가 전역적으로 데이터를 공유할 수 있게 하는 React의 기능 (useContext, Context.Provider 등 사용)JSX자바스크립트에 XML 문법을 결합한 문법 확장으로, React.createElement()로 변환되어 실제 DOM 생성에 사용됨useState함수형 컴포넌트에서 상태를 선언하고 사용할 수 있게 해주는 리액트 훅(Hook)useEffect컴포넌트가 렌더링된 후 실행되는 부수 효과(side effect)를 처리하기 위한 리액트 훅타입 추론타입스크립트가 코드에서 변수의 타입을 명시하.. 2025. 6. 19. [React] React 가이드(동작 원리 및 엔진) React란 무엇인가?React는 Facebook(Meta)에서 개발한 "JavaScript 라이브러리"로, UI(User Interface) 구축을 위한 컴포넌트 기반의 프레임워크입니다. React의 핵심 목표는 빠르고 효율적인 UI 렌더링이며, 이를 위해 "Virtual DOM(VDOM)"과 "선택적 렌더링(Reconciliation)" 기법을 사용합니다. 2. React의 동작 원리2.1 Virtual DOMReact는 Virtual DOM(가상 DOM) 을 사용하여 실제 DOM 조작을 최소화합니다. Virtual DOM은 메모리 내에서 UI의 가상 트리를 유지하며, 변경 사항이 감지되면 최소한의 실제 DOM 업데이트만 수행합니다.2.2 Reconciliation (조정 과정)상태(state)나 .. 2025. 3. 10. [React] React 상태 관리 Hook 정리 1. useStateuseState는 가장 기본적인 상태 관리 Hook으로, 컴포넌트 내에서 상태를 저장하고 업데이트하는 데 사용됩니다.import { useState } from "react";const MemoPad = () => { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>카운트 );};export default MemoPad;2. useEffectuseEffect는 컴포넌트가 렌더링될 때 특정 로직을 실행하고자 할 때 사용됩니다. 예를 들면 API 호출, 구독(subscription), DOM 업데이트 등의 작업이 가능합니다.import { useSt.. 2025. 3. 4. [React] 개발 단계에서 렌더링 두 번 발생 원인 및 방지 방법 (참고:해당 설명은 Vitrual Studio 프로그램 기준으로 설명합니다.) 다들 리액트로 개발하면서, 웹 콘솔창에 이유 없이 두 번의 상태값을 보신 적이 있을 겁니다. 어? 나는 아무것도 안 했는데? 이게 왜 뜨지라는 생각을 하였을 겁니다. 렌더링이 무엇이고, 개발 단계에서 두 번 발생하는지도 알아보겠습니다.목록렌더링이란?렌더링 발생 두 번 그 이유는?렌더링 발생 두 번 방지 1. 렌더링이란?웹 개발 관점에서의 렌더링은 웹 개발에서는 주로 "웹 페이지 UI를 생성"하고 "표시하는 과정"을 "렌더링"이라고 합니다. 사용자가 웹 페이지에 접속하거나 상호작용할 때, 브라우저는 웹 페이지의 구조와 스타일을 기반으로 화면에 내용을 그리는 렌더링 과정을 거칩니다.간다히 말씀드리자면, 우리가 웹 브라우저를 열어 .. 2023. 8. 30. 이전 1 2 다음
