React 프레임워크를 공부하면서 Virtual DOM이라는 개념을 자주 마주치게 되었다.처음에는 단순히 'DOM 조작을 최적화해주는 무언가'정도로만 이해하고 넘어갔지만, React의 핵심 개념을 제대로 이해하기 위해서는 Virtual DOM과 Diffing 알고리즘에 대한 깊은 이해가 필요하다는 것을 깨달은 것 같다!특히 컴포넌트의 상태가 변경될 때마다 React가 어떻게 효율적으로 UI를 업데이트하는지, 그 내부 동작 원리를 이해하는 것은 React 개발자로서 성장하는데 매우 중요한 부분이라고 생각하기에 이와 관련된 개념들을 정리하고자 한다 :)Virtual DOM이란?React에서 가장 핵심적인 개념 중 하나인 Virtual DOM은 실제 DOM의 가벼운 복사본이라고 할 수있다.실제 DOM을 직접..

최근 리액트에 대해 더 깊게 알아보다가 리액트 컴파일러 개념에 대해 공부하게 됬다!정말 중요한 개념인것 같아 블로그에 정리하고자 한다.먼저 React 컴파일러가 무엇일까?React 컴파일러는 빌드 타임에 React 코드를 최적화하는 도구라고 보면된다.컴파일러는 기존 리액트가 런타임에서 처리하던 많은 작업들을 빌드 단계에서 미리 처리하여, 성능을 향상시킨다. 이해가 안된다고 할 수 있다. 간단히 정리해주겠다.리액트 컴파일러가 등장하게 된 핵심 배경은 "런타임 오버헤드"란 문제를 해결하기 위해서인데 런타임 오버헤드란,프로그램이 실행되는 동안 발생하는 추가적인 연산과 메모리 사용을 의미한다. 컴파일러는 이러한 런타임 오버헤드를 빌드 시점에 최적화하여 실행 시점의 부담을 줄인다.마치 고속도로를 미리 만들어두는 ..

React 19가 출시되면서 create-react-app으로 새 프로젝트를 시작할 때마다 자동으로 React 19가 설치되는 것을 발견했다.하지만 테스팅 라이브러리는 아직 React 19를 지원하지 않고 React 18 버전에서만 작동하도록 설정되어 있기 때문에 문제가 생긴다.그래서 해결책 두 가지를 정리해보고자 한다.해결책1  : reportWebVitals 제거하기첫 번째 해결책은 바로 React 19에서 변경된 웹 바이탈스 리포팅 기능을 제거하는 것이다. src/index.js에서 다음 import문과, 하단의 reportWebVitals 함수 호출부를 제거하면 된다!import reportWebVitals from './reportWebVitals'reportWebVitals()🌟 말끔히 해결..

필자는 React를 처음 공부하기 시작했을 때, 클래스 컴포넌트의 this.state와 this.setState가 너무 복잡하게 느껴졌다.그러던 중 함수형 컴포넌트와 함께 등장한 useState라는 것을 알았고 기억을 더듬어 useState에 대해 정리해보고자 한다. 필요했던 순간은 언제였을까??? 🤔토이 프로젝트에서 사용자의 입력값을 관리해야 했었다.단순히 변수에 값을 저장하면 리렌더링이 되지 않아 화면이 업데이트되지 않았고, 이때 useState의 필요성을 절실히 느꼈던 것 같다.1. useState 제대로 알아보기import { useState } from 'react';function Counter() { // count: 현재 상태값 // setCount: 상태를 업데이트하는 함수 con..

최근 교회 설교 관리 시스템을 개발하면서 텍스트 에디터가 필요했다. 단순한 텍스트 입력이 아닌, 다양한 서식과 폰트를 지원하는 풍부한 에디터가 필요했고, 여러 옵션을 검토한 끝에 React Quill을 선택하게 되었다. React Quill은 강력한 기능과 커스터마이징 옵션을 제공하면서도, 사용법이 직관적이어서 개발하기 편했던것 같다! 😊1. React Quill 설치 및 기본 설정필자는 먼저 필요한 패키지를 설치했다.npm install react-quill# oryarn add react-quill 다음으로는 기본적인 에디터 컨포넌트를 만들기 위해 다음과 같이 코드를 작성했다.import React, { Component } from 'react';import ReactQuill from 'reac..

오늘은 프로젝트를 하다가 React와 Firebase를 사용하여 안전하고 신뢰할 수 있는 📞 전화번호 인증 시스템을 구현하는 방법을 알게 되었고 이에 대해 정리하고자 한다!! reCAPTCHA 인증을 포함하여 보안성을 강화하고, 환경 변수를 통한 중요 정보 관리도 함께 다룰 예정이다. (예시코드와 함께 간단하게 설명하고자 하고 기본적으로 리액트 프로젝트가 세팅되어있다고 가정하겠다.)1. Firebase Console 설정먼저 Firebase Console에서 프로젝트를 설정해야한다. 1-1. Firebase 프로젝트 설정Firebase Console에 접속"새 프로젝트 만들기" 클릭하기프로젝트 이름 입력 및 약관 동의 1-2. 전화번호 인증 활성화하기좌측 메뉴에서 "Authentication" 선택"시..

2024년 12월 5일, React 팀이 드디어 React 19를 정식 출시했다!!이번 메이저 업데이트는 개발자 경험을 획기적으로 개선했다고 생각하는데, 리액트 19의 주요 변화들을 정리해보고자 한다.자동 최적화의 시대? 새로운 컴파일러가 도입됬다.리액트 19의 가장 큰 변화는 새로운 컴파일러의 도입이다.이제 더 이상 useCallback이나 useMemo와 같은 메모이제이션 훅을 수동으로 관리할 필요가 없어졌다!아래 코드를 통해 이 변화를 보여주고자 한다.기존코드:const [count, setCount] = useState(0);const handleIncrement = useCallback(() => setCount(count + 1), []);const doubleCount = useMemo(()..

오늘은 컴공생들이 은근 모르는 👾 React Suspense 👾에 대해서 소개하고 설명하고자 한다.웹개발을 하다보면 데이터 로딩 속도로 인해 사용자 경험이 저하되는 문제가 생기곤한다.물론 사이즈가 작은 프로젝트를 하면 이 문제에 대해 심각성을 못 느낄 수 있다고 생각한다! 하지만 "대용량 데이터"를 다루는 경우엔 상황이 다르다. => 이럴 땐 로딩 속도가 더욱 중요한 요소로 작용한다.이럴 때에는 어떻게 해야될까?라고 생각하며 구글링을 하다가 찾은 것은 바로 React Suspense였다!이러한 데용량 데이터를 다루는 상황에서 React Suspense를 활용하면 데이터 로딩 상태를 보다 세련되게 처리할 수 있다!React SuspenseReact Suspense는 React 16.6부터 도입된 기능으..