mirabo01 님의 블로그

React 프로젝트를 운영하다 보면 한 번쯤은 “페이지가 느리다”, “클릭했는데 반응이 굼뜨다”는 이야기를 듣게 됩니다.이럴 때 가장 먼저 열어보기 좋은 도구 중 하나가 Lighthouse입니다.Chrome DevTools나 PageSpeed Insights에서 바로 실행할 수 있고, 성능뿐 아니라 접근성, SEO, 모범 사례까지 한 번에 확인할 수 있어서 초반 진단용으로 꽤 유용합니다.다만 여기서 먼저 정리해야 할 점이 있습니다.Lighthouse는 React를 직접 최적화해주는 도구가 아닙니다.대신 지금 이 페이지가 왜 느린지 브라우저 관점에서 먼저 보여주는 진단 도구에 가깝습니다.즉, React 성능 최적화에서 Lighthouse는 “해결 도구”라기보다문제를 발견하는 출발점으로 이해하는 편이 더 정..

React에서 useEffect를 처음 배울 때는 보통 데이터 요청, 이벤트 등록, 타이머 설정처럼 “무언가 실행하는 코드”에 집중하게 됩니다. 그런데 실제 프로젝트를 하다 보면, effect를 실행하는 것만큼 중요한 것이 바로 정리(cleanup)라는 점을 자주 체감하게 됩니다.처음에는 화면이 잘 보이기 때문에 문제가 없어 보일 수 있습니다. 하지만 컴포넌트가 다시 렌더링되거나 언마운트되는 과정에서 정리가 제대로 되지 않으면, 중복 이벤트 등록, 메모리 누수처럼 보이는 현상, 예상하지 못한 API 호출, 오래된 상태값 참조 같은 문제가 생길 수 있습니다.이 글에서는 React에서 useEffect cleanup이 왜 필요한지, 어떤 상황에서 꼭 써야 하는지, 그리고 실무에서 자주 하는 실수를 중심으로 ..

Next.js 프로젝트를 운영하다 보면 배포 후 브라우저 콘솔에서 아래와 같은 오류를 보게 되는 경우가 있습니다.Uncaught Error: Minified React error #418개발 환경에서는 잘 보이지 않다가, 운영 환경이나 특정 서버 배포 환경에서만 나타나는 경우도 있어서 더 당황스럽습니다. 특히 로컬에서는 정상인데 배포 서버에서만 발생하면 원인을 찾기가 더 어렵습니다.이 글에서는 Next.js에서 hydration error #418이 왜 발생하는지, 어떤 상황에서 자주 나타나는지, 그리고 실무에서 어떻게 점검하고 해결하면 되는지를 정리해보겠습니다.hydration error #418은 무엇을 의미할까이 오류는 보통 서버에서 렌더링된 HTML과 클라이언트에서 React가 다시 그린 결과가 ..

React를 쓰다 보면 언젠가 꼭 맞닥뜨리게 되는 고민이 있습니다.“이 상태를 어디에 두는 게 맞을까?”처음에는 각 컴포넌트 내부에서 useState로 관리하면 되지만,점점 컴포넌트가 깊어지고, props로 데이터를 계속 내려주다 보면코드가 복잡해지고 관리가 어려워집니다.이때 등장하는 게 바로 Context API입니다.상태를 전역으로 공유할 수 있게 도와주는,React 기본 내장 기능이자 상태 관리의 시작점이라고 할 수 있습니다.props drilling이 문제였던 시절예전에 프로젝트를 할 때,로그인한 사용자의 정보를 여러 페이지에서 보여줘야 했습니다.헤더, 사이드바, 마이페이지 등 거의 모든 컴포넌트가 이 정보를 필요로 했죠.처음엔 상위 컴포넌트에서 props로 내려주었는데,중간에 연결만 담당하는 컴..

1. 리액트에서 폼이 중요한 이유리액트를 사용하다 보면 사용자 입력을 다뤄야 하는 경우가 매우 많습니다.회원가입, 로그인, 검색창, 댓글 입력 등 — **폼(Form)**은 거의 모든 웹 애플리케이션의 기본입니다.일반 HTML에서는 의 값을 브라우저가 직접 관리하지만,리액트에서는 컴포넌트가 입력값을 직접 관리합니다.이 방식을 **Controlled Component (제어 컴포넌트)**라고 부릅니다.2. Controlled Component란?Controlled Component는 말 그대로 **컴포넌트가 입력값을 제어(control)**하는 구조입니다.즉, 입력 필드의 값이 컴포넌트의 state와 연결되어,사용자의 입력이 있을 때마다 state를 업데이트합니다.아래 예제를 보세요.import React..

1. 조건부 렌더링이란?리액트에서는 상황에 따라 화면에 다른 UI를 보여주는 것을 조건부 렌더링이라고 합니다.예를 들어 로그인 여부, 데이터 존재 유무, 버튼 클릭 상태에 따라서로 다른 화면을 보여줘야 할 때가 많죠.HTML에서는 보통 if 문이나 display:none 같은 CSS 조작을 사용했지만,리액트에서는 JSX 내부에서 조건문을 활용합니다.function App() { const isLoggedIn = true; return ( {isLoggedIn ? 환영합니다! : 로그인이 필요합니다.} );}여기서 {}는 JSX 내부에서 자바스크립트 표현식을 사용할 수 있는 영역입니다.따라서 삼항연산자를 통해 조건에 따라 다른 엘리먼트를 반환할 수 있습니다.2. 삼항 연산자 (..

1. 리스트 렌더링이란?리액트에서 배열 데이터를 화면에 표시하려면단순히 하나씩 나열하는 대신 **반복문(map)**을 이용해 렌더링합니다.예를 들어, 사용자 목록을 렌더링한다고 가정해봅시다.function UserList() { const users = ['기범', '지수', '민준', '수현']; return ( {users.map((user) => ( {user} ))} );}이렇게 하면 users 배열의 각 요소가 형태로 출력됩니다.리액트는 map()의 반환값을 자동으로 인식해, JSX 요소 리스트로 변환합니다.하지만 여기서 중요한 점은 — 모든 반복된 요소에는 key가 필요하다는 것입니다.2. Key 속성이 필요한 이유리액트는 Virtual DO..

1. 리액트에서의 이벤트 처리란?HTML에서는 클릭 이벤트를 처리할 때 이렇게 작성합니다.버튼하지만 리액트에서는 이벤트를 문자열이 아닌 함수로 전달합니다.또한 HTML의 이벤트 이름은 소문자지만,리액트에서는 **CamelCase(낙타 표기법)**으로 작성해야 합니다.function App() { function handleClick() { alert('클릭되었습니다!'); } return 버튼;}즉, HTML의 onclick → React의 onClick,onchange → onChange 처럼 표기 방식이 달라집니다.2. 이벤트 객체(Event Object)이벤트가 발생하면 리액트는 이벤트 정보를 **SyntheticEvent(합성 이벤트)**라는 형태로 전달합니다.이는 브라우저 간의 차이를..

1. 생명주기(Lifecycle)란?리액트에서 컴포넌트는 생성되고, 업데이트되고, 사라지는 흐름을 가지고 있습니다.이 과정을 **컴포넌트의 생명주기(Lifecycle)**라고 부릅니다.쉽게 말하면, 리액트 컴포넌트도 사람처럼“태어남 → 변화함 → 사라짐”의 과정을 겪는다는 뜻입니다.이 생명주기를 이해하면 다음과 같은 일들을 더 효율적으로 처리할 수 있습니다.API 데이터를 컴포넌트가 처음 렌더링될 때 불러오기특정 상태가 바뀔 때만 실행되는 로직 제어컴포넌트가 사라질 때 정리(clean-up) 작업 수행2. 클래스형 컴포넌트의 생명주기 메서드리액트 초창기에는 클래스형 컴포넌트에서 생명주기 메서드를 사용했습니다.아래 코드는 기본적인 구조를 보여줍니다.import React, { Component } from..

비동기 요청을 처리하다 보면 이런 순간이 자주 있습니다.좋아요 버튼을 눌렀는데, 반응이 1~2초 늦게 오는 경우요.사실 요청이 성공했는지 실패했는지는 중요하지 않습니다.사용자는 그저 ‘눌렀을 때 바로 반응이 오는가’를 체감할 뿐입니다.이걸 해결하는 핵심 개념이 바로 **옵티미스틱 업데이트(Optimistic Update)**입니다.React Query를 쓰면 이걸 정말 간단하게 구현할 수 있습니다.서버의 응답을 기다리지 않고,UI가 “먼저 결과를 보여주는” 구조입니다.예전엔 이렇게만 생각했습니다초반엔 단순히 버튼을 누르면 로딩 스피너를 띄우고,응답이 오면 상태를 바꾸는 식으로만 코드를 짰습니다.const handleLike = async () => { setIsLoading(true); await a..