React - React의 렌더링 방식 : State

State가 변경될 때 React는 어떻게 렌더링할까?React는 가상 DOM (Virtual DOM)을 기반으로 효율적인 렌더링을 수행하는 프레임워크이다.※가상 (Virtual) DOM ?리액트가 효율적으로 UI를 업데이트하기 위해 사용하는 가상의 DOM 구조이다.기존 웹 브라우저는 일반적인 HTML DOM에서 직접 수정하면 속도가 느려지고DOM 조작이 많아질 수록 성능이 크게 저하되는데여기서 가상 DOM의 역할이 중요시하게 된다.리액트는 가상 DOM을 메모리에 저장하고 실제로 DOM을 직접 조작하지 않으며여기서 놀라운점은 상태(state)변경이 발생하면 가상 DOM에서 먼저 변경된 부분을 적용한 후,실제 DOM과 비교하여 최소한의 변경만 적용한다.이로써, 브라우저의 성능을 최적화하면서도 빠른 UI 업..

• format_list_bulleted React
• · 2025. 2. 27.
• textsms

React - State

State(상태)는 리액트에서 컴포넌트 내부에서 관리되는 동적인 데이터를 의미한다.사용자 입력, API 응답, 버튼 클릭 등과 같은 이벤트에 따라 변할 수 있는 값을 저장하는 공간으로,state가 변경될 때 마다 리액트는 자동으로 컴포넌트를 재렌더링하여 UI를 최신 상태로 유지한다.State 사용방법▼ 함수형 컴포넌트에서 useState 사용하기import { useState } from "react"function Counter() { // count 상태(state)와 이를 변경할 수 있는 setCount 함수 선언 const [count, setCount] = useState(0) return ( 현재 카운트 : {count} setCount(count + 1)}>증..

• format_list_bulleted React
• · 2025. 2. 26.
• textsms

React - children props

리액트에서는 모든 컴포넌트가 props를 받을 수 있지만children prop은 특별한 역할을 하는데컴포넌트 태그 내부에 있는 내용을 동적으로 전달할 때 사용하고레이아웃 컴포넌트, 재사용 가능한 UI 요소 등을 만들 때 매우 유용하다. 기본적으로는 props는 부모 -> 자식으로 데이터를 전달하는 역할을 한다고 했을 때,children prop은 컴포넌트 태그 사이의 내용을 가져오는 역할을 한다.즉 children을 사용하면 부모 컴포넌트에서 원하는 내용을 동적으로 넣을 수 있다. children prop 기본 사용법// Card.jsxfunction Card({ children }) { return ( {/* children을 통해 태그 내부의 내용을 랜더링 */} {chi..

• format_list_bulleted React
• · 2025. 2. 21.
• textsms

React - props

앞서 공부했던 내용들 중에 다양한 예시로 props를 사용했었다props가 도대체 무엇이고 어떻게 사용하는지 이 글을 통해 알아보자. 리액트에서는 컴포넌트가 재사용 가능해야 하므로특정한 값(데이터)을 외부에서 받아서 동적으로 다룰 수 있어야 한다.이때 외부에서 값을 전달해주는 역할을 하는 것이 바로 props이다.React props의 기본 개념props (프로퍼티)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이며리액트에서는 컴포넌트 간에 데이터를 주고 받을 때직접 값을 수정하는 것이 아니라,props를 통해 데이터를 전달해 줘야한다. 만약 props없이 고정된 값이라면 다음과 같은 예시를 들 수 있다.// Greeting.jsxfunction Greeting() { return ( ..

• format_list_bulleted React
• · 2025. 2. 20.
• textsms

React - 리액트 컴포넌트 (React Component)

리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드블록이다.컴포넌트를 사용하면 코드를 모듈화할 수 있어 유지보수가 쉬워지고재사용성이 높아지는 특징을 갖고 있다.React 컴포넌트 종류리액트 컴포넌트는 두 가지 주요 컴포넌트 유형이 있다. 1. 함수형 컴포넌트 (Functional Component) 함수형 컴포넌트는 React 16 이후의 최신 방식이며 function 키워드를 사용한다.function Greeting() { return ( 안녕하세요 )}export default Greeting; 2. 클래스형 컴포넌트 (Class Component)클래스형 컴포넌트는 16 이전에는 많이 사용했지만 지금은 함수형 컴포넌트와 hook(useState, useEffe..

• format_list_bulleted React
• · 2025. 2. 19.
• textsms

React - JSX에서 자바스크립트 사용하기

JSX는 리액트에서 UI를 구성하는 기본적인 문법으로자바스크립트 코드 안에서 HTML과 유사한 구조를 작성할 수 있도록 도와준다.하지만 실제로는 자바스크립트의 확장 문법이므로 몇 가지 차이점을 이해해야한다.천천히 알아보자.1. 기본 JSX 문법 이해하기JSX는 자바스크립트의 확장 문법이므로return문 안에서 HTML과 비슷한 코드를 작성할 수 있다. ▼ HTML 코드처럼 JSX 작성하기function App() { return ( Vite + React )}export default App는 프래그먼트(Fragments) 이며 이전 글을 참고하면 되고h1 태그는 마치 HTML을 작성하는 것처럼 보이지만 실제로는 JSX 문법이다.2. JSX에서 자바스크립트 표현식 사용하기JSX..

• format_list_bulleted React
• · 2025. 2. 17.
• textsms