Dachae's DevLogs

useEffect 리액트에서 함수형 컴포넌트를 사용할 때 가장 자주 만나게 되는 훅 중 하나가 useEffect 입니다. useEffect 는 컴포넌트가 렌더링된 이후 특정 작업(사이드 이펙트)을 실행할 수 있게 도와주는 훅입니다. 예를 들어, API 호출, 이벤트 리스너 등록, 타이머 설정, 외부 라이브러리 초기화 등의 작업이 이에 해당합니다.이 글에서는 useEffect 의 기본 개념부터 동작 방식, 의존성 배열, 정리(clean-up) 함수까지 단계별로 알아보겠습니다. 1. useEffect란?useEffect 는 리액트 컴포넌트가 렌더링된 이후 실행되는 함수입니다. 컴포넌트가 처음 렌더링될 때, 특정 값이 바뀔 때, 컴포넌트가 사라질 때 등 다양한 타이밍에 맞춰 동작할 수 있습니다.useEffe..

useRef 리액트에서 DOM에 직접 접근하거나 컴포넌트 간 특정 값을 공유하고 싶을 때, useRef 훅은 매우 유용한 도구입니다. 초보자에게는 조금 낯설 수 있지만, 잘 활용하면 불필요한 리렌더링을 줄이고, DOM 요소를 직접 제어하며, 타이머나 이전 상태 값을 저장하는 등 다양한 상황에서 활용할 수 있습니다. 1. useRef란?useRef 는 리액트 훅 중 하나로, 변경 가능한 참조 객체(mutable ref object)를 반환합니다. 이 객체는 .current 라는 프로퍼티를 가지고 있으며, 여기에 원하는 값을 저장하거나 DOM 요소를 참조할 수 있습니다.const myRef = useRef(initialValue);myRef.current 에 값이 저장됩니다..current 의 값이 변경..

useState 리액트를 처음 접하거나 훅(Hook)에 입문하는 개발자라면 가장 먼저 만나게 되는 개념 중 하나가 바로 useState입니다. useState는 컴포넌트 내부에서 상태(state)를 관리할 수 있게 해주는 리액트 훅이며, 함수형 컴포넌트에서도 클래스 컴포넌트 못지않게 동적인 UI를 구현할 수 있게 해줍니다. 1. useState란?useState는 리액트에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 함수입니다. 상태는 컴포넌트의 데이터나 UI를 동적으로 변경할 때 사용하는 값입니다.기본 문법const [state, setState] = useState(initialValue);state : 현재 상태 값setState :..

useContext 리액트 앱을 만들다 보면 컴포넌트 간 상태를 공유해야 하는 경우가 많습니다. 예를 들어, 로그인 여부, 테마 설정, 다크모드, 언어 설정 등은 여러 컴포넌트가 함께 사용하는 전역 상태입니다.이럴 때 React의 Context API + useContext 훅을 사용하면 아주 깔끔하게 상태를 관리할 수 있습니다. 1. useContext란?useContext는 Context 객체의 값을 쉽게 꺼내 쓰기 위한 React 훅입니다.Context는 React에서 전역 상태를 만들 수 있도록 도와주는 기능이고, useContext는 이 Context에 저장된 값을 컴포넌트 내부에서 간단히 꺼내 쓰게 해주는 도구입니다.언제 useContext를 쓰는가? 로그인 여부 관리 : isAuthenti..

React Lifecycle 리액트 컴포넌트를 사용하다 보면 "언제 데이터를 불러와야 할까?", "언제 정리(clean-up)를 해야 할까?" 같은 고민이 생깁니다. 이럴 때 중요한 개념이 바로 컴포넌트의 라이프사이클(Lifecycle) 입니다. 이 글에서는 리액트 컴포넌트가 생성되고, 업데이트되고, 제거되는 일련의 과정을 클래스형 컴포넌트와 함수형 컴포넌트(Hooks 사용) 관점에서 자세히 설명합니다. 1. 리액트 라이프사이클이란?리액트 컴포넌트는 화면에 렌더링되는 동안 여러 가지 단계를 거칩니다. 이 일련의 과정이 라이프사이클이며, 크게 세 단계로 나뉩니다:마운트(Mount) : 컴포넌트가 DOM에 삽입될 때업데이트(Update) : 상태나 props가 바뀌어 컴포넌트가 다시 렌더링될 때언마운트(U..

Next.js Next.js는 React 기반의 웹 애플리케이션 개발을 위한 프레임워크입니다. React는 컴포넌트 기반 UI 라이브러리로 강력하지만, 실제 웹 애플리케이션을 만들기 위해서는 라우팅, 데이터 패칭, 서버 렌더링, SEO 최적화, 코드 분할 등의 여러 요소를 직접 구현해야 합니다.Next.js는 이러한 복잡한 기능들을 기본 제공하여, 개발자가 더 적은 설정과 코드로 더 강력한 웹 애플리케이션을 만들 수 있도록 도와줍니다. 1. Next.js란 무엇인가요?Next.js는 React 기반의 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 도와주는 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅, 이미지 최적화 등 React로는 직접 구현하기 복잡한 ..

xlsx 웹 애플리케이션에서 사용자가 직접 엑셀 파일을 업로드하고, 그 내용을 읽어온 뒤 수정하거나 다시 다운로드할 수 있다면 정말 유용합니다. 특히 보고서 처리, 데이터 검증, 간단한 데이터 편집 UI 등에 적합하죠. 라이브러리로는 가장 널리 쓰이는 xlsx를 사용합니다. 이 글에서는 Node.js 없이, 순수 React에서 엑셀 파일을 읽고, 수정하고, 다시 엑셀이나 CSV로 다운로드하는 과정을 소개합니다. 1. xlsx 라이브러리란?xlsx는 JavaScript에서 엑셀 파일을 읽고 쓰기 위해 만들어진 라이브러리입니다.브라우저, Node.js 환경 모두에서 사용할 수 있고, .xlsx, .xls, .csv 등 다양한 포맷을 지원합니다.공식 명칭은 "SheetJS"이며, xlsx는 그 중 핵심 모듈..

useCallback React를 사용하다 보면 컴포넌트가 생각보다 자주 리렌더링되거나, 자식 컴포넌트가 의미 없이 반복해서 렌더링되는 문제를 경험하게 됩니다. 이럴 때 자주 등장하는 해결책이 바로 useCallback 훅입니다.useCallback 은 함수의 참조값을 유지해 불필요한 렌더링을 줄이는 데 도움을 주는 도구이지만, 언제 써야 효과가 있고, 언제 쓰지 말아야 하는지에 대한 명확한 기준 없이 무작정 사용하는 경우가 많습니다.이 글에서는 useCallback 의 기본 개념부터, 실제 사용 예제, 그리고 사용을 권장하는 상황과 피해야 할 상황까지 모두 정리합니다. 성능 최적화를 위해 useCallback 을 고민하고 있다면, 이 글이 그 판단에 확실한 기준을 줄 수 있을 거예요. 1. useCa..

Vue LifecycleVue.js에서 컴포넌트는 생성(Creation) → 마운트(Mounting) → 업데이트(Updating) → 소멸(Unmounting)의 과정을 거칩니다. 이 각 단계마다 특정 라이프사이클 훅(Lifecycle Hook)이 호출되며, 컴포넌트의 상태나 DOM, 데이터를 조작할 수 있는 타이밍을 제공합니다.이 글에서는 Vue 3 기준으로 주요 라이프사이클 훅과 사용 예제를 정리합니다. 1. 전체 라이프사이클 흐름 요약 ┌────────────┐ │beforeCreate│ └────────────┘ ↓ ┌────────────┐ │ created │ ← 데이터 접..

Next.js 라우팅 Next.js는 React 기반의 프레임워크로, 복잡한 라우팅을 간편하게 처리할 수 있는 파일 기반 라우팅 시스템을 제공합니다. 특히 Next.js 13부터는 기존의 Pages Router 외에 새로운 방식인 App Router가 도입되며, 더 유연하고 강력한 기능들이 추가되었습니다.이 글에서는 Next.js 라우팅의 기본 개념부터, 최신 App Router 방식까지 한 번에 정리해 드립니다. 1. Next.js 라우팅이란?Next.js에서는 파일 이름과 디렉토리 구조가 곧 URL 경로가 됩니다. React Router처럼 수동으로 라우팅을 정의할 필요 없이, 구조에 맞게 폴더와 파일을 배치하기만 하면 됩니다./pages ├── index.js → / ├── abou..

key React에서 리스트를 렌더링할 때 map() 을 자주 사용하며, key prop을 지정하는 것이 필수입니다. 많은 초보 개발자들이 편의상 key={index} 를 사용하는데, 이는 잠재적인 버그와 성능 문제를 일으킬 수 있습니다. 이 글에서는 왜 key로 인덱스를 사용하면 안 되는지, 어떤 경우에 문제가 발생하는지, 그리고 올바른 key 지정 방법까지 자세히 설명합니다. 1. key란 무엇인가?React는 리스트를 렌더링할 때 각 요소의 변경 여부를 추적해야 합니다. 이때 key는 React가 어떤 아이템이 변경, 추가, 삭제되었는지 효율적으로 파악할 수 있도록 도와주는 고유 식별자입니다.const list = ['apple', 'banana', 'cherry'];list.map((item, ..

클래스 컴포넌트와 함수 컴포넌트 React에서는 컴포넌트를 클래스 컴포넌트와 함수 컴포넌트, 두 가지 방식으로 정의할 수 있습니다. 두 컴포넌트는 모두 동일한 기능을 할 수 있지만, 내부적으로 처리되는 방식이 다르며, 최신 React에서는 함수 컴포넌트가 많이 선호되고 있습니다. 그 이유는 더 간단하고 직관적이며, 훅(Hooks)을 사용할 수 있기 때문입니다. 1. 클래스 컴포넌트클래스 컴포넌트는 React.Component를 상속받는 ES6 클래스로 정의된 컴포넌트입니다. 상태 관리와 라이프사이클 메서드를 사용할 수 있습니다.클래스 컴포넌트의 기본 구조import React, { Component } from 'react';class MyComponent extends Component { cons..

Redux Toolkit React로 애플리케이션을 개발하다 보면 컴포넌트끼리 상태(state)를 공유하고 관리하는 게 점점 복잡해집니다. 이런 문제를 해결하기 위해 등장한 대표적인 상태 관리 라이브러리가 바로 Redux입니다. 그리고 Redux를 더 쉽고 간단하게 쓰기 위해 나온 것이 바로 Redux Toolkit(RTK)이죠. 1.  Redux란?Redux는 애플리케이션의 상태를 중앙에서 관리할 수 있도록 도와주는 JavaScript 라이브러리입니다. React와 함께 많이 사용되지만, 실제로는 프레임워크에 종속되지 않습니다.Redux를 쓰는 이유상태를 예측 가능하게 만들기 위해여러 컴포넌트에서 공통 상태를 공유하고 관리하기 위해디버깅, 테스트, 개발도구 연동이 쉬운 구조를 만들기 위해 2.  Red..

Redux React를 사용하다 보면 컴포넌트 간의 상태 공유가 점점 복잡해집니다. 부모 → 자식으로 상태를 전달하거나, 여러 컴포넌트에서 같은 데이터를 관리하다 보면 데이터 흐름이 꼬이고 유지보수가 어려워지죠. 이럴 때 필요한 것이 바로 Redux입니다.Redux는 앱의 모든 상태를 하나의 중앙 저장소(Store)에서 관리하게 해주며, 상태의 흐름을 예측 가능하게 만들어줍니다. 1. Redux란?Redux는 JavaScript 앱의 상태(state)를 관리하기 위한 라이브러리입니다. 주로 React와 함께 사용되지만, 프레임워크에 의존적이지는 않습니다.핵심 목표상태(state)의 일관성과 예측 가능성 보장중앙 집중식 상태 관리디버깅, 테스트, 개발 도구 통합 용이 2. 왜 Redux가 필요한가?R..

Advanced React HooksReact를 어느 정도 사용해본 개발자라면 useState, useEffect 같은 기본 훅은 익숙할 것입니다. 하지만 복잡한 상태 관리나 라이프사이클 제어, 퍼포먼스 개선 등 더 세밀한 제어가 필요할 땐 고급 훅(Advanced Hooks)이 큰 도움이 됩니다. 1.  useReducer  (복잡한 상태 관리를 위한 훅)언제 사용하나요?useState로는 관리하기 힘든 복합 상태상태 전이 로직을 명확하게 정의하고 싶을 때기본 구조const [state, dispatch] = useReducer(reducer, initialState);예제const initialState = { count: 0 };function reducer(state, action) { swit..