React 상태 관리 정리
·
React
React를 사용하면서 가장 중요한 개념 중 하나가 "상태(State)"다. 상태를 어떻게 구조화하고, 공유하며, 유지 및 초기화할지에 따라 애플리케이션의 유지보수성과 성능이 크게 달라질 수 있다. 이번 글에서는 React 공식 문서를 기반으로 상태 관리의 핵심 개념들을 정리해보았다.1. 상태 구조 결정하기컴포넌트에서 상태를 어떻게 구성할지는 중요한 설계 요소다. React에서는 다음과 같은 기준을 고려하여 상태를 결정할 수 있다.필요한 최소한의 상태만 유지: UI를 그리기 위해 필요한 데이터만 상태로 관리하고, 나머지는 계산된 값(derived state)으로 처리하는 것이 좋다.상태는 어떤 컴포넌트에서 관리해야 할까?: 특정 컴포넌트에서만 사용하는 상태라면 해당 컴포넌트 내부에서 관리하는 것이 바람직..
React 상태 관리와 입력 반응 정리
·
React
React를 학습하면서 가장 중요한 개념 중 하나는 상태(state) 관리다. 특히 사용자 입력에 반응하는 방식과 상태를 다루는 방법을 이해하는 것이 중요하다. 이번 글에서는 React 공식 문서와 Reacting to Input with State를 기반으로, 상태 관리와 입력 반응에 대해 정리해보겠다.1. React의 상태(state)란?상태(state) 는 React 컴포넌트에서 값이 변경될 때 UI를 다시 렌더링하는 중요한 데이터다. 컴포넌트의 내부 상태를 나타내며, 예를 들어 사용자 입력, 체크박스 상태, 카운터 값 등이 상태가 될 수 있다.React에서는 useState 훅을 사용해 상태를 관리한다.useState를 이용한 상태 선언import { useState } from "react";f..