Front-end 개발

1. Controlled vs Uncontrolled ComponentReact의 input은 크게 Controlled Component와 Uncontrolled Component로 나뉩니다.Controlled Componentvalue 속성을 state와 연결한 형태React의 상태(state)가 UI를 "완전히 제어"값 변경 시 onChange 이벤트로 상태를 업데이트해야 함import { useState } from "react";function ControlledInput() { const [text, setText] = useState(""); return ( setText(e.target.value)} /> );}✅ 이 방식은 React 철학에 맞고, 대부분의 경우 권장되는 ..

📌 제목React에서 상태가 갑자기 초기화되는 이유와 해결법 — 컴포넌트 리렌더링 문제 실습 예제📝 본문React에서 컴포넌트 상태가 갑자기 초기화되는 문제를 경험한 적이 있나요?보통 이는 리렌더링 구조나 상태 관리 패턴에서 발생하는 문제입니다.이번 글에서는 원인 분석, 실습 예제, 그리고 해결 방법까지 자세히 안내합니다.1️⃣ 상태 초기화가 발생하는 대표적인 이유컴포넌트가 재생성될 때 state 초기화부모 컴포넌트가 리렌더링되면, 자식 컴포넌트가 새로 마운트되며 상태 초기화Key 속성 변경에서 key가 바뀌면 React는 기존 컴포넌트를 버리고 새로 생성State를 변수로 직접 재할당useState 대신 일반 변수 사용 → 리렌더링 시 값 유지 안됨비동기 함수에서 잘못된 클로저 참조이전 렌더링의 상..

📌 제목React Context API로 전역 상태 관리하기 — Redux 없이 간단 실습📝 본문리액트에서 컴포넌트 간 상태 공유를 할 때, Redux나 MobX 같은 외부 라이브러리를 사용하지 않고도 Context API만으로 충분히 전역 상태 관리가 가능합니다.이번 글에서는 Context 개념, 기본 사용법, 실습 예제까지 자세히 안내합니다.1️⃣ Context API 개념Context API는 React에서 전역 상태를 공유할 수 있는 내장 기능입니다.주로 theme, 로그인 정보, 다국어, 사용자 설정 등을 관리할 때 유용합니다.Provider → Consumer 구조로 데이터를 전달합니다.핵심 특징항목 설명ProviderContext를 하위 컴포넌트에 공급ConsumerContext 값을 받..

📄 본문JavaScript로 규모가 있는 프론트엔드 프로젝트를 진행해 본 개발자라면,런타임 오류나 타입 추론의 한계를 경험해보셨을 겁니다.이런 문제를 해결하기 위해 많은 프론트엔드 개발자들이 선택한 도구가 바로 TypeScript입니다.이번 글에서는 TypeScript 기본 개념, 주요 문법, 그리고 React/Vue 프로젝트에서 연동하는 방법까지 실용적으로 정리해보겠습니다.🧠 TypeScript란?TypeScript는 JavaScript에 타입 시스템을 추가한 언어입니다.Microsoft에서 만들었고, .ts 확장자를 사용합니다.정적 타입(컴파일 타임 타입 체크)인터페이스, 제네릭, 열거형 등 풍부한 문법최신 ECMAScript 기능 지원JavaScript로 트랜스파일되어 실행✏️ 1. TypeSc..

📄 본문React 18부터 본격적으로 도입된 Concurrent Mode와 Suspense는 애플리케이션의 성능과 사용자 경험을 향상시키는 강력한 기능입니다.이번 글에서는 두 개념의 원리를 소개하고, 코드 스플리팅과 데이터 페칭에 활용하는 방법을 예제와 함께 정리해보겠습니다.1. Suspense란?Suspense는 컴포넌트의 로딩 상태를 선언적으로 처리할 수 있도록 돕는 React의 기능입니다.원래는 React.lazy()를 통해 코드 스플리팅에만 사용되었지만, React 18부터는 데이터 로딩에도 활용할 수 있도록 확장되었습니다.✅ 기본 사용 예제 (코드 스플리팅)import React, { Suspense } from 'react';const LazyComponent = React.lazy(() =..

📄 본문React 기반의 SPA(Single Page Application)를 만들 때 필수적으로 사용하는 라이브러리 중 하나가 React Router입니다. 2021년에 출시된 React Router v6는 이전 버전과 비교해 사용법이 조금 달라지고, 더 직관적이고 강력한 기능을 제공합니다.이번 글에서는 react-router-dom v6의 기본 설정부터 Route 구성 방법, 그리고 주요 훅인 useNavigate, useParams 사용법까지 예제를 포함해 상세하게 설명합니다.1. React Router v6 설치먼저 프로젝트에 React Router v6를 설치합니다.npm install react-router-dom@6또는yarn add react-router-dom@62. 기본 설정 및 라우..

1.export default 선언된 모듈에 하나의 변수,클래스,함수만 export할수 있다.(한개) import할때는 원하는 이름으로 가능하다. /* Main.js */ export default Main; /* App.js */ import Main from "./main.js" 2.export(=named export) 선언된 모듈에 변수,클래스,함수 export할수 있다.(여러개) import할때는 원하는 이름으로 불가능하다. import 시 {}안에 export 된 이름과 동일하게 해야 한다. /* Main.js */ export let Run1 = () =>{ console.log(1); } function Run2(){ console.log(2); } export Run2, /* App.js..

1.구글 애널리틱스 계정(ID) 발급 받기 발급 시 'Google 애널리틱스 4 속성과 유니버설 애널리틱스 속성 둘 다 만들기'로 선택하기 관리 → 속성설정 → 추적ID → UA-XXXXXXXX-X 확인하기 2.useEffect() Hooks을 사용하여 GA설정 하기 https://www.npmjs.com/package/react-ga $ npm install react-ga --save //react-ga Module 설치하기 import React, { useEffect } from "react"; import ReactGA from "react-ga"; export default function Example() { const ga_setting = () => { const pathName = wi..

1.React(리액트)란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용할 수 있습니다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 합니다. 2.React 특징 단방향 데이터 바인딩(One Wat Data flow) ▷리엑트는 단방향 바인딩을 사용하여 성능저하를 줄이고 더 확실하게 데이터를 추적 할수 있습니다. 가상돔(Virtual Dom) ▷싱글 페이지 어플리케이션(SPA)에서는 리플로우/리페인트거 자주 발생 되는데 가상돔을 사용하여 최소화하여 성능을 최적화 시켰습니다. 컴포넌트(..