어제 오늘 내일

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는 기본적으로 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 그런데 만약 네트워크 요청처럼 오래 걸리는 작업이 끝날 때까지 다음 코드 실행을 멈추고 기다린다면 어떻게 될까요? 화면이 멈추고, 사용자는 아무것도 할 수 없는 답답한 경험을 하게 될 것입니다.이 문제를 해결하기 위해..