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

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