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 값을 받..

📄 본문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. 기본 설정 및 라우..

📝 본문React에서 컴포넌트를 만들 때 가장 많이 사용하는 Hook이 무엇일까요?바로 **useState**와 **useEffect**입니다.이 둘은 각각 "상태를 관리", **"변화를 감지해 작업을 실행"**하는 역할을 하며함께 사용하면 더욱 강력한 기능을 발휘합니다.이번 글에서는 useState와 useEffect를 개념부터 실전 예제까지 완벽하게 정리해드립니다.🧩 useState란?컴포넌트 내에서 **상태(state)**를 저장하고 변경할 수 있게 해주는 Hook입니다.import { useState } from "react";const [count, setCount] = useState(0);🔁 useEffect란?컴포넌트가 렌더링된 후 실행되는 함수입니다.API 호출, 타이머, 콘솔 로그..

📝 본문React에서 컴포넌트가 렌더링될 때 **사이드 이펙트(side effect)**를 처리하기 위해 사용하는 Hook이 바로 useEffect입니다.데이터 요청, 이벤트 등록, 타이머 설정 등 DOM 외부와 상호작용하는 모든 작업은 useEffect로 처리해야 합니다.이 글에서는 useEffect의 기본 개념부터, 의존성 배열, 마운트·업데이트·언마운트 처리 방법, 그리고 클린업(clean-up)까지 완벽하게 정리해드립니다!🔍 useEffect란?useEffect는 컴포넌트가 렌더링된 이후 실행되는 함수를 등록하는 React Hook입니다.import { useEffect } from 'react';useEffect(() => { // 여기에 비동기 작업, API 호출 등을 작성});⏳ 언제 ..

1. Toast UI Editor란?Toast UI Editor는 NHN에서 개발한 오픈소스 마크다운 에디터로, 웹에서 손쉽게 마크다운(Markdown) 문서를 작성할 수 있도록 도와줍니다. 실시간 미리보기 기능과 풍부한 플러그인 지원을 제공하여 블로그, 위키, 문서 관리 시스템 등에 널리 활용됩니다.(1) 주요 특징마크다운 지원: 마크다운 문법을 사용하여 간편하게 문서 작성 가능실시간 미리보기: 입력한 마크다운을 즉시 HTML로 변환하여 확인 가능플러그인 확장 기능: 코드 하이라이트, 테이블, 멀티미디어 삽입 등 다양한 기능 추가 가능다양한 모드 지원: WYSIWYG(What You See Is What You Get) 모드와 마크다운 모드 제공오픈소스: 누구나 무료로 사용 가능하며 커스터마이징 가능2..

1. 리액트 서스펜스란?리액트 서스펜스는 컴포넌트가 렌더링되기 전에 필요한 데이터나 리소스가 준비될 때까지 로딩 상태를 선언적으로 관리할 수 있게 해주는 기능입니다.2. 서스펜스를 사용하는 이유비동기 작업의 로딩 상태를 더 우아하게 처리할 수 있습니다.코드 스플리팅과 데이터 페칭을 더 간단하게 구현할 수 있습니다.사용자 경험을 향상시킬 수 있는 로딩 UI를 쉽게 구현할 수 있습니다.3. 서스펜스 사용법기본적인 사용 예시:import { Suspense } from 'react';function App() { return ( Loading...}> );}4. 주요 사용 사례데이터 페칭function ProfilePage() { return ( }> );..

1.is unrecognized in this browser 에러가 날 경우 의미없는 대신 을 사용하면 콘솔오류가 없어집니다. 2.is using incorrect casing 에러가 날 경우 첫 문자를 대문자로 사용해야 합니다.(React 구성 요소에는 PascalCase를 사용하고 있습니다.) ※ PascalCase(파스칼 표기법)란? 모든 단어의 첫글자가 단어수와 상관없이 대문자로 시작합니다. 예) PascalCase 이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요. 큰 도움이 됩니다.