React.js (7) 썸네일형 리스트형 [React] React에서 ref란? 정말 꼭 써야 할까? React를 공부하다 보면 한 번쯤 만나게 되는 ref. 많은 사람들이 이렇게 말하죠.“ref는 DOM에 접근할 수 있게 해주는 훅이다.”정확한 설명입니다. 하지만 여기서 끝내기엔 너무 아쉽습니다.그럼 도대체 왜 DOM에 접근해야 할까요? 상태(state)나 props로는 부족한 걸까요?이 글에서는 그런 궁금증들을 차근차근 풀어보려 합니다.1️⃣ ref란 무엇인가?React에서 ref는 특정 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 수 있게 해주는 방법입니다.useRef() 훅을 사용하거나, 클래스형 컴포넌트에서는 createRef()로 생성합니다.import { useRef, useEffect } from 'react';function Example() { const inputRef = useR.. [React] React에서 URL 쿼리 vs API 쿼리 호출: 언제 어떤 걸 써야 할까? 최근 회사 프로젝트에서는 URL 대부분이 query string 기반으로 상태를 관리하고 있었습니다.페이지 번호, 필터 조건, 정렬 방식, 검색어 등 다양한 값들이 URL에 그대로 드러나 있었고, 그 구조를 파악하고 유지하는 것이 꽤 중요한 과제가 되었습니다. 초기에는 API 호출 없이 프론트엔드에서만 필터링을 처리하고 있었기 때문에, 상태 유지를 위해 query string을 자연스럽게 사용했습니다.하지만 SEO 작업을 진행하면서 query string을 제거해야 하는 상황이 되었고, 그에 따라 서버 API를 통해 데이터를 다시 가져오는 방식으로 변경하게 되었습니다. 이 경험을 계기로“어떤 경우에 query string을 사용해야 하고, 어떤 경우에는 숨기는 것이 좋을까?” 라는 질문을 스스로에게 던지.. [React]React useImperativeHandle Hook 깊게 이해하기 useImperativeHandle이란?useImperativeHandle은 React에서 제공하는 Hook으로, ref를 통해 부모 컴포넌트에 노출할 인스턴스 값을 사용자가 직접 정의할 수 있게 해주는 기능입니다. 기본적으로 부모 컴포넌트에서 자식 컴포넌트의 DOM 노드에 직접 접근할 때 ref를 사용하지만, useImperativeHandle을 사용하면 노출하고자 하는 메서드나 값들을 직접 선택하여 제공할 수 있습니다.사용 시기useImperativeHandle은 다음과 같은 상황에서 주로 사용됩니다:부모 컴포넌트에서 자식 컴포넌트의 특정 메서드를 호출해야 할 때컴포넌트의 내부 구현을 숨기고 특정 기능만 외부에 노출하고 싶을 때기존 DOM 요소의 메서드나 속성을 커스터마이즈하고 싶을 때실제 사용 예시.. [React]React useActionState Hook에 대해 알아보기 소개useActionState는 React 18.3.1에서 도입된 새로운 Hook으로, form 액션을 기반으로 상태를 효율적으로 관리할 수 있게 해줍니다. 이 Hook은 React 서버 컴포넌트를 지원하는 프레임워크에서 사용할 때 가장 큰 이점을 얻을 수 있습니다.참고: React Canary 버전에서는 이 Hook이 React DOM에 포함되어 있습니다. 기본 사용법1. Hook 초기화useActionState는 두 가지 매개변수를 받습니다:상태를 업데이트하는 함수초기 상태값"use client";import { useActionState } from "react";const [state, formAction] = useActionState( (previousState, formData) => { .. [React] react-beautiful-dnd를 이용한 Drag and Drop 구현 웹 디자인 도구나 레이아웃 빌더를 개발하면서 사용자가 요소들을 자유롭게 이동하고 그룹화할 수 있는 인터페이스의 필요성을 느꼈습니다. 이를 위해 react-beautiful-dnd 라이브러리를 선택하여 직관적이고 부드러운 드래그 앤 드롭 경험을 구현했습니다. react-dnd가 아니라 react-beautiful-dnd를 선택한 이유가 무엇인가요?react-dnd는 react-beautiful-dnd보다 자유도가 높고, 커스텀하기에도 훨씬 유리하다는 장점이 있습니다. 하지만 위치 변경 애니메이션이나 드래그 후 이동 로직을 직접 정의해야 한다는 단점이 있었습니다.저는 이번 과제에서 복잡한 커스텀 작업이 필요하지 않았고, 단순히 위아래로 요소를 이동하면서 기본적인 애니메이션이 자연스럽게 적용되는 라이브러리가 .. [React] 서버와 통신하며 임시저장 기능 구현하기 저는 영상 자막 편집에 대해 임시저장을 하는 기능을 구현했습니다. 그때 발생한 이슈에 대해 공유하려고 합니다. 이 전에 사용했던 코드이전에는 setInterval 사용한 방식이었습니다.//useEffect (30초마다 임시 저장)useEffect(() => { const interval = setInterval(saveTemporary, 10000); // 10초마다 호출 return () => clearInterval(interval); // 페이지 나갈 때 정리 // eslint-disable-next-line react-hooks/exhaustive-deps}, [inputText, testImageTextIdx, saveTemporary]); 이 부분은 10초마다 saveTemporary 함.. [React] React에서의 실시간 검색 기능 최적화: Debounce 기법 적용 경험 프로젝트에서 실시간 검색 기능을 구현하면서 생긴 이슈에 대해 글을 작성해보겠습니다. 문제 상황프로젝트에서 실시간 검색 기능을 구현하면서 몇 가지 문제에 직면했습니다.사용자 입력마다 API 요청이 발생하여 불필요한 네트워크 트래픽 증가과도한 요청으로 인한 성능 저하데이터가 즉시 반영되어 사용자 인터페이스가 불안정해 보이는 현상 Debounce란?이러한 문제를 해결하기 위해 Debounce 기법을 적용했습니다. Debounce는 연속적으로 발생하는 이벤트를 그룹화하여 마지막 이벤트만 처리하는 방식입니다. 검색 기능에 적용하면, 사용자의 타이핑이 일정 시간 동안 멈춘 후에만 검색 요청을 보내도록 할 수 있습니다. 프로젝트 적용 사례 및 성능 개선 결과1. Debounce 기법 적용커스텀 Debounce 훅을 .. 이전 1 다음