Frontend/React

React Router: push와 replace의 차이점

history.push와 history.replace는 둘 다 React Router에서 경로를 변경할 때 사용하는 메서드지만, 동작 방식에 중요한 차이가 있다.  1. history.push역사 기록에 새로운 항목을 추가한다.사용자가 새로운 페이지로 이동한 것처럼 브라우저의 뒤로 가기 버튼을 통해 이전 페이지로 돌아갈 수 있다.history.push('/new-route');s  특징브라우저의 기록 스택에 새로운 항목을 추가하기 때문에, 사용자가 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 돌아갈 수 있다.페이지 탐색을 할 때 일반적으로 사용하는 방식이다.  2. history.replace현재 페이지의 URL을 대체한다.역사 기록을 덮어쓰기 때문에 브라우저의 뒤로 가기 버튼으로는 대체하기 전의 페이지로..

React Hook Form의 handleSubmit으로 폼 제출 시 페이지 리렌더링 방지하기

폼 제출 시 페이지 리렌더링: 기본 동작 방지를 잊은 예시// 잘못된 코드 예시import React, { useState } from "react";const ExampleForm = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); // onSubmit 함수, 기본 동작 방지 없음 const onSubmit = (e: React.FormEvent) => { // e.preventDefault()가 없으므로 폼 제출 시 페이지 새로고침 발생 console.log("폼이 제출되었습니다:", { email, password }); }; return ( ..

React Router v6

react-router-dom은 v6으로 업그레이드 React Router v6는 2021년 11월 2일에 공식적으로 출시되었다.React Hooks와 더 나은 통합을 제공하며, 번들 크기가 줄어드는 등의 장점이 있다.npm install react-router-dom@latest // v6.2.2npm install --save-dev @types/react-router-dom // 타입 정의 패키지  useNavigate() 훅을 도입해 useHistory()를 대체했다.useHistory가 navigation과 통합되어 사라졌다.하지만 useNavigate를 사용하여 동일한 기능을 수행 할 수 있다.API가 간소화되었다.가 로 대체되었다.또한 exact 속성이 삭제되어 경로 매칭이 더 간단해졌다. ..

React에서 렌더링이 발생하는 조건과 렌더링 성능 최적화 방법

🧐 렌더링이 발생하는 조건1. 컴포넌트의 state가 변경되었을 때2. 컴포넌트가 상속받은 props가 변경되었을 때 3. 부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링🧐렌더링 성능 최적화 방법1. hook (useMemo, useCallback)useMemo - 계산의 재실행을 방지useCallback - 함수의 재생성을 방지2. ContextAPI, 기타 상태 관리툴ContextAPI - 컴포넌트 간에 값을 공유, 주로 전역적으로 필요한 값을 다룰 때 사용- 해당 값이 필요한 컴포넌트에만 전달하여 리렌더링 시키고 다른 컴포넌트는 리렌더링 되지 않게 하기recoil - 전역 상태를 관리하기 위한 상태 관리 라이브러리3. windowning - 현재 화면에 보이는 항목만 렌더링 하..