어제 오늘 내일

React 컴포넌트는 레고 블록과 같습니다. 조각조각 만들어진 컴포넌트들을 조합하여 하나의 완성된 웹 페이지를 구축합니다.이때 "컴포넌트에 전달되는 데이터"와 "컴포넌트 내부에서 변하는 데이터"를 관리하기 위해 사용하는 핵심 개념이 바로 Props와 State입니다.이번 포스팅에서는 Props와 State의 각각의 개념과 특징, 한눈에 보는 비교표, 그리고 두 개념을 함께 활용하는 상태 끌어올리기(Lifting State Up) 패턴까지 알아보겠습니다.1. Props (Properties)란?Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다.함수에 전달하는 매개변수(Parameter)와 유사한 개념으로 생각하면 이해하기 쉽습니다.📌 Props의 핵심 특징읽기 전용 (Read-Only)..

React 컴포넌트를 작성하다 보면 서버에서 데이터를 불러오거나(Data Fetching), 타이머를 설정하거나, 브라우저 DOM을 직접 조작하는 등의 작업이 필요합니다.이처럼 컴포넌트의 순수한 렌더링 과정 외에 외부 시스템과 동기화하거나 발생하는 부수 효과를 React에서는 Side Effect(사이드 이펙트)라고 부릅니다. 그리고 이러한 Side Effect를 안전하게 처리하도록 도와주는 대표적인 Hook이 바로 useEffect입니다.1. useEffect 기본 구조useEffect는 [실행할 콜백 함수, 의존성 배열]이라는 두 개의 인자를 받습니다.import React, { useEffect } from 'react';useEffect(() => { // 1. 실행할 Side Effect 로직..

React로 웹 애플리케이션을 만들 때 가장 핵심이 되는 개념은 '상태(State)'입니다.일반 자바스크립트 변수는 값이 바뀌어도 화면에 즉시 반영되지 않지만, React의 State 값이 변경되면 컴포넌트가 리렌더링(Re-render)되어 화면이 자동으로 업데이트됩니다.이번 포스팅에서는 함수형 컴포넌트에서 상태를 관리하게 해주는 useState Hook의 기초 사용법과 실무에서 꼭 알고 있어야 할 주의사항 3가지를 알아보겠습니다.1. useState 기본 사용법useState는 호출 시 [현재 상태 값, 상태를 변경하는 함수] 형태의 배열을 반환합니다. 이를 구조 분해 할당(Destructuring)을 통해 가져와 사용합니다.import React, { useState } from 'react';fun..

React 애플리케이션을 개발하다 보면 useEffect 내부에서 API 호출 등 비동기 작업을 수행하는 경우가 매우 많습니다.하지만 컴포넌트가 빠르게 재렌더링되거나 유저가 다른 페이지로 이동(언마운트)했을 때,이미 보낸 API 요청이 뒤늦게 응답을 반환하여 메모리 누수나 레이스 컨디션(Race Condition)을 유발하곤 합니다.이러한 문제를 깔끔하게 해결해 주는 표준 Web API가 바로 AbortController입니다.이 포스팅에서는 AbortController의 기본 개념부터 React에서 활용하는 3가지 실전 패턴(언마운트 대처, 실시간 검색 처리, 커스텀 훅 작성)을 알아보겠습니다.1. AbortController란?AbortController는 하나 이상의 DOM 요청(예: fetch A..

React 프로젝트를 진행하다 보면 한 번쯤 이런 경험을 하게 됩니다. "어? 분명 useEffect에 console.log를 하나만 찍었는데 왜 터미널과 브라우저 콘솔에 두 번씩 나올까?""API 요청을 한 번만 보내야 하는데 왜 두 번이나 호출되는 거지?" 이 현상의 주범은 바로 React StrictMode입니다. 이번 글에서는 StrictMode가 무엇인지, 왜 개발 환경에서 코드를 두 번 실행하는지, 그리고 이를 통해 어떤 이점을 얻을 수 있는지 정리해 보겠습니다.1. React StrictMode란?React.StrictMode는 React 애플리케이션 내의 잠재적인 문제를 감지하기 위한 개발 전용 도구입니다.import React from 'react';import ReactDOM from ..