Dachae's DevLogs

useContext React 애플리케이션에서 컴포넌트 간 데이터를 공유할 때 props drilling(깊게 전달되는 props)이 반복되면 유지보수가 어려워집니다. 이때 useContext 훅은 컴포넌트 트리 전체에 걸쳐 데이터를 쉽게 공유할 수 있는 강력한 도구가 됩니다. 이 글에서는 useContext에 대한 개념 설명은 생략하고, 실제로 프로젝트에서 어떻게 useContext를 사용하는지 A부터 Z까지 구현 중심으로 자세히 안내합니다. 1. Context 생성하기 (Create Context)먼저 context 객체를 생성합니다.// ThemeContext.jsimport { createContext } from 'react';export const ThemeContext = createCon..

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..

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..

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..

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..

React Custom Hooks 리액트 훅을 사용하다 보면, useState, useEffect, useRef 등 반복되는 로직이 여러 컴포넌트에 등장하는 경우가 많습니다. 이때 공통 로직을 재사용하고, 컴포넌트는 UI에만 집중할 수 있도록 도와주는 것이 바로 커스텀 훅(Custom Hook)입니다. 1. 커스텀 훅이란?커스텀 훅은 이름 그대로 개발자가 직접 정의한 훅 함수입니다. 내부적으로는 useState, useEffect 등 기존 훅을 사용해 공통 로직을 추상화합니다.규칙이름은 반드시 use로 시작해야 합니다 (useMyHook)일반 함수지만 훅 규칙(Hooks Rules)을 따라야 합니다최상위에서만 호출조건문이나 반복문 안에서는 호출하지 말 것 2. 간단한 예제a. 윈도우 크기 추적 훅i...

React Hooks React 16.8부터 등장한 Hooks(훅)은 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 다룰 수 있게 해주며, 컴포넌트 구조를 더욱 직관적으로 바꿨습니다. 이 글에서는 자주 사용되는 기본 훅부터 커스텀 훅 제작까지 핵심 내용을 정리해드립니다. 1. 리액트 훅이란?기존에는 컴포넌트의 상태나 라이프사이클을 제어하려면 클래스형 컴포넌트를 써야 했습니다. 하지만 React Hooks는 함수형 컴포넌트에서도 다음과 같은 기능을 제공해줍니다.상태 관리 (useState)컴포넌트 생명주기 대응 (useEffect)외부 DOM 접근 (useRef)성능 최적화 (useMemo, useCallback)컨텍스트 사용 (useContext).etc 2. 가장 많이 쓰는 기본 훅a. use..