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. [React] 오디오 이퀄라이저"EQ(Equalizer)"구현하기(@dschoon/react-waves라이브러리) - Vitrual Studio기준 목차 1. 이퀄라이저 (EQ)란?2. 구현 예시.3. React Wave 사용 과정.React Wave 설치.React Wave 컴포넌트 사용. 1. 이퀄라이저 (EQ)란? "EQ"는 "이퀄라이저"의 줄임말로, 음악이나 오디오의 주파수 대역별로 음량을 조절하는 기술입니다. 이를 시각화한 것을 "음악 시각화 EQ"라고 합니다. 주로 음악 시각화 프로그램이나 앱에서 사용되며, 음악의 주파수 구성을 시각적으로 확인하거나 변화를 보여줄 때 활용합니다. 2. 구현 예시 이 프로젝트에서는 React 라이브러리를 사용하여 오디오 주파수를 시각화하는 과정을 구현할 것입니다. 이것은 음악의 주파수 대역을 시각적으로 표현하는 것입니다. 여기서는 DB와의 연동 등 다양한 추가 기능은 고려하지 않습니다. 컴포넌트의 개수는 적.. 2023. 8. 30. 이전 1 다음
