[React] <Link>와 <a> 태그의 차이와 동작 원리

서론React에서 페이지 이동을 처리하는 방법으로 와 태그가 있다.둘 다 사용자의 클릭을 통해 다른 페이지로 이동하는 역할을 하지만, 동작 방식에는 큰 차이가 있다.이번 글에서는 React의 와 태그의 차이점과, 의 내부 동작 원리를 분석해보겠다. 1. 태그와 의 차이(1) 태그란?HTML에서 태그는 기본적인 하이퍼링크(hyperlink) 역할을 한다.클릭하면 전체 페이지를 새로고침(F5)하며 이동한다.Example 페이지로 이동장점단점브라우저의 기본 기능을 그대로 사용React 애플리케이션에서는 전체 페이지가 새로고침됨 → SPA 성능 저하서버 측에서 렌더링(SSR)되는 페이지에서는 유용상태(state)가 초기화됨 → 애플리케이션이 비효율적으로 동작(2) 태그란?import { Link } ..

• format_list_bulleted React
• · 2025. 2. 19.

[React] CRA, CRACO, 캐시 무효화(Cache Busting)

CRACO를 이용하여 배포 시 캐싱 무효화실무 작업 중 업데이트 이후 관리자 분들에게 캐시 삭제 후 새로 고침을 요청하는 일이 잦아져서 따로 개발할 필요가 있어 기록HOTFIX시에는 오류를 낸 상황이여서 굉장히 말씀드리기가 껄그러운 상황이 있다. (캐시 새로고침 설명 드리고.. 이미지로 설명 드리고..)CRACO로 빌드까지 성공한 것은 별도로 작성 예정 1. CRA(Create React App)란?CRA(Create React App)는 리액트 애플리케이션을 빠르게 설정할 수 있도록 돕는 공식 도구다. 웹팩(Webpack), Babel, ESLint 등의 복잡한 설정 없이 바로 프로젝트를 시작할 수 있도록 해준다.특징빠른 프로젝트 초기화: 별도의 설정 없이 리액트 프로젝트를 생성할 수 있다.내장된 웹팩..

• format_list_bulleted React
• · 2025. 2. 5.

[React] 함수형 컴포넌트, 클래스형 컴포넌트

import React, { Component } from "react";class CustomInput extends Component { render (){ return( ) }}export default CustomInputconst CustomInput = () => { return ( )}export default CustomInput상단 코드는 클래스형 컴포넌트, 하단은 함수형 컴포넌트라 칭한다. 가끔 라이브러리 내부 코드를 보면 클래스형 컴포넌트로 많이 작성되어 있는걸 볼 수 있다. 함수형 컴포넌트를 주로 사용하지만 프로젝트의 성격과 필요에 따라 클래스형 컴포넌트를 알아둘 필요가 있을 것이다. 클래스형 컴포넌트 (Class Com..

• format_list_bulleted React
• · 2024. 12. 8.