어제 오늘 내일

React를 배우다 보면 useState만으로는 해결하기 애매한 상황을 만나게 됩니다. "값은 기억하고 싶은데 화면은 다시 그리고 싶지 않을 때", 혹은 "특정 input에 직접 포커스를 주고 싶을 때" 같은 경우죠. 이럴 때 사용하는 것이 바로 useRef Hook입니다. 이 글에서는 useRef의 두 가지 핵심 용도를 예제와 함께 알아보겠습니다.useRef란?useRef는 변경 가능한(mutable) 값을 담는 상자를 만들어주는 Hook입니다. 이 상자는 .current라는 프로퍼티를 가지며, 여기에 어떤 값이든 담아둘 수 있습니다.import { useRef } from 'react';function Component() { // 초기값 0을 담은 ref 객체를 생성 // ref는 { curre..

React를 처음 배울 때 가장 먼저 마주치는 낯선 문법이 바로 JSX입니다. 자바스크립트 안에 HTML 같은 코드가 섞여 있는 모습을 보고 당황하기 쉽죠. 이 글에서는 JSX가 무엇인지, 어떤 규칙을 지켜야 하는지 기초부터 차근차근 알아보겠습니다.JSX란?JSX는 JavaScript XML의 줄임말로, 자바스크립트 안에서 HTML과 비슷한 문법으로 UI를 표현할 수 있게 해주는 문법 확장입니다.// 이것이 바로 JSXconst element = 안녕하세요, React!;한 줄로 정리하면, JSX는 "자바스크립트 코드 안에 마크업을 자연스럽게 작성하는 방법"입니다. 브라우저는 JSX를 직접 이해하지 못하기 때문에, Babel 같은 도구가 JSX를 일반 자바스크립트로 변환해줍니다.// 우리가 작성하는 JS..

React 애플리케이션이 커지다 보면 렌더링 성능이 신경 쓰이기 시작합니다. 특히 무거운 계산이 매 렌더링마다 반복되면 앱이 느려질 수 있죠. 이럴 때 사용하는 것이 바로 useMemo Hook입니다. 이 글에서는 useMemo가 무엇인지, 언제 쓰고 언제 쓰지 말아야 하는지 예제와 함께 알아보겠습니다.메모이제이션이란?useMemo를 이해하려면 먼저 메모이제이션(Memoization) 개념을 알아야 합니다. 메모이제이션은 이미 계산한 결과를 저장해 두었다가, 같은 입력이 들어오면 다시 계산하지 않고 저장된 값을 재사용하는 최적화 기법입니다.쉽게 말해, "한 번 계산한 건 기억해뒀다가 그대로 꺼내 쓰자"는 아이디어입니다.문제 상황: 매 렌더링마다 반복되는 무거운 계산먼저 useMemo가 없을 때 어떤 문제..

React로 애플리케이션을 개발하다 보면 여러 컴포넌트가 같은 데이터를 필요로 하는 상황을 자주 마주치게 됩니다. 이럴 때 사용하는 것이 바로 Context API입니다. 이 글에서는 Context API가 왜 필요한지, 어떻게 사용하는지, 그리고 언제 사용해야 하는지 알아보겠습니다.Props Drilling 문제React는 기본적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달합니다. 하지만 컴포넌트 트리가 깊어지면 문제가 생깁니다.function App() { const user = { name: "홍길동", theme: "dark" }; // App에서 만든 user 데이터를 Layout에 props로 전달 return ;}function Layout({ user }) {..

JavaScript로 개발을 하다 보면 서버에서 데이터를 가져오거나, 파일을 읽거나, 타이머를 다루는 등 시간이 걸리는 작업을 자주 만나게 됩니다. 이런 작업들을 효율적으로 처리하기 위한 핵심 도구가 바로 async/await입니다. 이 글에서는 비동기 처리가 왜 필요한지부터, async/await를 실전에서 어떻게 활용하는지까지 차근차근 살펴보겠습니다.1. 비동기 처리가 필요한 이유JavaScript는 기본적으로 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 그런데 만약 네트워크 요청처럼 오래 걸리는 작업이 끝날 때까지 다음 코드 실행을 멈추고 기다린다면 어떻게 될까요? 화면이 멈추고, 사용자는 아무것도 할 수 없는 답답한 경험을 하게 될 것입니다.이 문제를 해결하기 위해..

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 ..