[REACT] state의 스냅샷 이해하기

state는 스냅샷React의 useState Hook은 상태 변수와 업데이트 함수를 제공합니다. 상태를 변경하면 React는 컴포넌트를 재렌더링하며, 새로운 상태를 반영한 UI 스냅샷을 생성합니다. 그러나 현재 렌더링의 스냅샷은 고정되어 있으며, 이벤트 핸들러 내에서 상태 변경 함수가 호출되더라도 그 시점의 상태 값은 그대로 유지됩니다. 이는 상태가 각 렌더링의 사진처럼 캡처되어 사용됩니다.import { useState } from 'react';export default function ScoreBoard() { const [score, setScore] = useState(0); const handleScoreIncrease = () => { setScore(score + 1); s..

• format_list_bulleted REACT/리액트 학습하기
• · 2025. 3. 14.
• textsms

[REACT] 렌더링과 커밋 과정: 화면에 나타나기까지의 3단계

트리거: 렌더링 요청렌더링은 두 가지 경우에 발생합니다.초기 렌더링: 애플리케이션이 처음 실행될 때, 루트 컴포넌트를 DOM에 마운트하기 위해 렌더링이 트리거됩니다.상태/Props 변경: useState나 useReducer를 통해 상태가 업데이트되거나, 부모로부터 새로운 props가 전달되면 재렌더링이 발생합니다.렌더: 컴포넌트 호출과 JSX 계산렌더 단계에서 React는 컴포넌트를 호출해 현재 상태와 props를 기반으로 JSX 트리를 생성합니다. 이 과정은 순수 함수처럼 동작하여, 동일한 입력에 대해 항상 동일한 출력을 반환합니다. 렌더링은 실제 DOM에 반영되기 전, 메모리 내에서 계산되는 단계로 볼 수 있습니다.import { useState, useEffect } from 'react';exp..

• format_list_bulleted REACT/리액트 학습하기
• · 2025. 3. 14.
• textsms

[REACT] 상태 관리: useState로 컴포넌트의 동적 메모리 활용하기

상태가 필요한 이유사용자가 버튼을 누르거나 입력 필드에 텍스트를 추가할 때, 컴포넌트는 그 변화를 기억하고 UI에 반영해야 합니다. 예를 들어, 체크리스트에서 항목을 선택하거나, 탭 메뉴에서 활성 탭을 전환할 때, 단순 변수로는 이를 유지할 수 없습니다. 상태(state)는 이런 데이터를 저장하고, 변경 시 컴포넌트를 자동으로 업데이트하는 역할을 합니다.useState로 상태 선언하기useState는 상태 변수와 그 값을 업데이트하는 함수를 쌍으로 반환합니다. 상태가 변경되면 React는 컴포넌트를 재렌더링해 최신 상태를 반영합니다.import { useState } from 'react';export default function TogglePanel() { const [isOpen, setIsOpe..

• format_list_bulleted REACT/리액트 학습하기
• · 2025. 3. 14.
• textsms

[REACT] 이벤트 핸들링 기법

React 이벤트 핸들링의 기본React에서는 HTML 이벤트 속성을 camelCase(예: onClick)로 작성하며, 함수를 이벤트 핸들러로 전달해 사용자 행동에 반응합니다.기본 이벤트 핸들러 정의가장 간단한 이벤트 핸들링은 컴포넌트 내에서 함수를 정의하고 이를 JSX 요소에 연결하는 방식입니다.export default function ToggleButton() { function handleToggle() { alert('토글이 전환되었습니다!'); } return ( 토글 버튼 );}인라인 이벤트 핸들러 활용간단한 동작은 인라인으로 작성할 수 있습니다. 화살표 함수를 사용하면 코드가 간결해지며, 즉석에서 로직을 정의할 수 있습니다.import { useStat..

• format_list_bulleted REACT/리액트 학습하기
• · 2025. 3. 14.
• textsms

[REACT] UI 트리 이해하기

UI를 트리로 모델링하는 이유HTML은 DOM 트리로, CSS는 CSSOM 트리로 표현되듯, React 역시 컴포넌트를 트리 형태로 관리합니다. 이는 부모 컴포넌트가 자식 컴포넌트를 포함하는 계층 구조를 형성하며, UI의 복잡성을 체계적으로 다룰 수 있게 합니다. 트리 구조는 React의 선언적 렌더링과 효율적인 업데이트 메커니즘의 기반이 됩니다.렌더 트리렌더 트리는 React 컴포넌트가 실제로 화면에 렌더링되는 방식을 보여주는 구조입니다. 각 컴포넌트는 트리의 노드로 나타나며, 부모-자식 관계를 통해 계층적으로 연결됩니다.예제: 렌더 트리// BlogApp.jsimport React from 'react';import Header from './Header';import PostList from './..

• format_list_bulleted REACT/리액트 학습하기
• · 2025. 3. 13.
• textsms

[REACT] 컴포넌트의 최적화와 확장

React 컴포넌트 순수성React 컴포넌트는 본질적으로 JavaScript 함수입니다. 이 함수가 순수하면, 주어진 입력에 따라 동일한 JSX를 반환하며 외부 환경에 영향을 주지 않습니다.순수 컴포넌트의 장점서버 사이드 렌더링(SSR) 안정성순수 컴포넌트는 동일한 입력에 대해 항상 동일한 결과를 보장하므로, 서버에서 여러 요청을 처리할 때 일관된 렌더링을 제공합니다.성능 최적화입력값이 변하지 않으면 React는 불필요한 재렌더링을 생략하거나 캐싱할 수 있어, 애플리케이션의 속도가 향상됩니다.렌더링 중단 및 재개 가능성순수 컴포넌트는 렌더링이 중단되더라도 최신 입력값으로 언제든지 안전하게 재개될 수 있어, 복잡한 UI에서도 안정성을 유지합니다.React의 최신 기능 활용데이터 페칭, 트랜지션, Suspe..

• format_list_bulleted REACT/리액트 학습하기
• · 2025. 3. 13.
• textsms