react
[React] background-image에 svg 사용하기 (inline SVG)
[React] background-image에 svg 사용하기 (inline SVG)
2024.05.10위치별 파일 경로 기준JSX 엘리먼트 속성의 루트 폴더 기준 : publicCSS 파일 루트 폴더 기준 : src파일 최상단 import 구문 : src 폴더만 처리 가능(public 폴더에 있는 파일은 불가) 태그 src 속성(JSX 태그 속성)에 src 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 src 속성에 할당하거나,src 속성 안에서 require() 사용 e.g. 문제 상황 JSX 엘리먼트 속성의 루트 폴더 기준은 public 폴더므로 이미지 파일이 src 폴더에 있다면 파일 최상단에서 이미지 파일을 import 한 후 인라인 스타일 url() 함수에 사용할 수 있다. *.png, *.webp 같은 이미지 파일은 아래 방법으로 잘 작동한다.// src/asse..
[React] useInfiniteQuery + IO API 사용시 무한 렌더링 문제 해결
[React] useInfiniteQuery + IO API 사용시 무한 렌더링 문제 해결
2024.05.09문제 원인렌더링 데이터의 마지막 인덱스 위치에 IO(Intersection Observer) 관찰 요소를 표시하는 방식은 무한 렌더링 문제가 발생할 수 있다. 데이터가 1~2개 밖에 없어서 관찰 요소가 항상 화면에 들어온다면 ➊fetchNextPage 실행(React Query 훅이 반환하는 함수) → ➋기존 데이터 반환 → ➌렌더 → ➍IO 화면에 들어옴 → ➊fetchNextPage 실행 → 반복… 위 과정을 계속 반복하면서 무한 렌더링하는 문제가 발생한다. Query Key가 바뀌지 않아서 데이터 fetch 없이 캐싱한 데이터를 사용하지만 무한 렌더링 때문에 어플리케이션이 정상적으로 작동하지 않는다. 데이터가 아예 없다면 IO 관찰 대상 요소도 렌더링 하지 않으므로 문제가 없는것처럼 보이기 때문에 ..
[React] 리액트 ref 객체 여러개 만들기
[React] 리액트 ref 객체 여러개 만들기
2024.05.08정의 ▼import { createRef } from 'react';// 함수 컴포넌트 본문const entriesRef = useRef(FILTER_LIST.map(() => createRef())); 사용 ▼// 함수 컴포넌트 리턴문FILTER_LIST.map((name, i) => {name}); 글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요
[Next.js] document is not defined 오류 해결 방법
[Next.js] document is not defined 오류 해결 방법
2024.05.08Next.js는 서버 사이드에서 HTML을 생성하고 클라이언트에 전달한 후, 클라이언트에선 각 요소에 이벤트 핸들러를 달아서 실행 가능하도록 만든다(이를 Hydration이라고 부름)하지만 서버 사이드에서 HTML을 생성하는 시점엔 document 객체가 존재하지 않으므로 에러가 발생하는 것. document는 DOM(객체처럼 HTML을 조작할 수 있는 모델)에 접근할 때 사용하는 객체이며, 브라우저 환경에서만 접근할 수 있다.때문에 클라이언트에서 React 컴포넌트가 마운트된 후 document 객체에 접근하도록 해야 한다. react-no-ssr 같은 라이브러리를 사용하거나 useIsMounted 같은 커스텀훅을 사용하면 위 문제를 해결할 수 있다. 💡 useIsMounted 같은 커스텀 훅은 보통..
[React] 객체를 prop으로 받을 때 Default Parameter 지정
[React] 객체를 prop으로 받을 때 Default Parameter 지정
2024.05.08문제💡 기본값으로 지정한 options 객체에 size, color 속성을 모두 유지해야 하는 상황 컴포넌트 특정 Prop의 기본값을 객체로 지정하고, 컴포넌트를 사용하는 곳에서 객체를 넘기면 기본값으로 지정한 객체를 덮어쓴다. 아래 예시에선 options 프롭에 size, color 속성을 갖는 객체를 기본값으로 지정했지만 컴포넌트를 사용하는 곳에서 size 속성만 갖는 객체를 넘기므로 options 프롭은 { size: 5 }가 된다.// 컴포넌트 정의function Child({ options = { size: 100, color: 'black' } }) { // options 프롭 기본값을 { size: 100, color: 'black' } 으로 설정}// 컴포넌트 사용return ;// 프..
[React] 리액트 Suspense 톺아보기
[React] 리액트 Suspense 톺아보기
2024.05.06React v18 버전부터 Suspense를 공식적으로 지원한다. Suspense는 컴포넌트 렌더링에 필요한 특정 작업이 완료되지 않았음을 React에게 알려주는 매커니즘이다. 이 특정 작업은 여러가지가 있겠지만 Data Fetching 같은 비동기 작업인 경우가 가장 많다. Suspense를 이용하면, 데이터를 다 불러오지 못한 컴포넌트의 렌더링을 잠시 중단시키고 Loading 화면 같은 다른 컴포넌트를 먼저 보여주도록 할 수 있다. 💡 Suspense는 React Query, SWR 같은 Data Fetching 라이브러리와 함께 사용할 수 있도록 설계됐다. Data Fetching 라이브러리에선 옵션 인자를 전달하는 방식으로 Suspense 기능을 활성화 할 수 있다. 예를들어 useSWR에선 세..
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
2024.05.05엄격 모드의 기능CRA로 생성한 React 프로젝트에선 엄격 모드(Strict Mode)가 기본적으로 적용돼 있다. 엄격 모드는 어플리케이션의 잠재적인 문제를 알아내기 위해 리액트에서 제공하는 도구다. 개발 모드에서 함수 컴포넌트 렌더링 / API 호출 등이 중복해서 발생한다면 엄격 모드 때문에 그럴 가능성이 높다.import React from "react";import ReactDOM from "react-dom/client";import App from "./pages/App";const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement,);root.render({/* ... */}); 엄격 모드는 아래 기능을 제..
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
2024.05.05검색창 자동 완성 기능은 , 태그를 이용해 빠르게 구현할 수 있다(참고 포스팅). 키보드 방향키로 옵션을 선택할 수도 있다. 하지만 이 방법은 리스트 요소에 클릭 이벤트를 할당할 수 없는 단점이 있다(검색을 정말 많이 해봤지만 결론은 불가). 검색창에 키워드를 입력한 후 목록에 있는 각 옵션()을 클릭할 때마다 특정 액션을 취해야 한다면 위 방법을 사용할 수 없다. 대안은 React Select 처럼 잘 만든 라이브러리를 사용하거나, 몇 년간 유지 보수한 라이브러리보단 완성도는 조금 떨어질 수 있지만 직접 구현할 수 있다. 아래는 직접 구현한 내용을 기록한 내용. 구현 목표마우스로 리스트 이동 / 선택Enter 키로 선택방향키로 리스트 이동 (Keyboard navigate)스크롤이 생긴 목록에서 방향..
[React] 리액트 드래그앤드롭 파일 업로드 구현
[React] 리액트 드래그앤드롭 파일 업로드 구현
2024.05.05요즘 대부분 웹사이트에서 파일을 업로드할 때 마우스로 원하는 파일을 끌어 놓는 드래그&드롭 기능을 지원한다. 리액트에선 React DnD 같은 라이브러리를 사용할 수도 있지만 HTML5에서 제공하는 드래그 드롭 API를 이용해서 직접 구현할 수 있다. 생각보다 어렵지도 않다. 기본 구조더보기export interface IFileTypes { id: number; object: File; // File 객체}const DragDrop = ( { /* ... */ },) => { const [isDragging, setIsDragging] = useState(false); const [files, setFiles] = useState([]); const fileId = useRef(0);..
[React] Blur 효과를 활용한 이미지 지연 로딩 Image Lazy Loading
[React] Blur 효과를 활용한 이미지 지연 로딩 Image Lazy Loading
2024.05.04웹페이지에서 성능에 영향을 가장 많이 주는 부분이 이미지 / 비디오 같은 미디어 요소다. 특히 이미지는 배너, 제품 사진, 로고 등 페이지 구석구석에서 사용한다. HTTP Archive Data에 따르면 전체 웹페이지 용량의 45%를 이미지가 차지한다고 한다. 이미지를 사용하지 않는건 불가능하지만, 화면에 노출될 때만 이미지를 불러오는 방식으로 페이지 로딩 시간을 단축시킬 수 있다. 이런 방식을 Lazy Loading이라고 한다. Lazy Loading 구현 방법💡 Lazy Loading이 적용된 이미지가 뷰포트에 근접해서 이미지를 로드하면 콘텐츠가 밀려나는 현상이 발생한다. 이를 방지하려면 이미지를 감싸는 컨테이너 요소에 높이 / 너비를 지정하면 된다. Lazy Loading은 크게 Chrome Na..
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
2024.05.041) 스크롤 이벤트를 사용한 방법무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다. 알아야 할 기하 프로퍼티 ❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop ❷ 현재 화면(뷰포트)의 높이window.innerHeight : 스크롤바 포함document.documentElement.clientHeight : 스크롤바 제외 ❸ 전체 문서의 높이// 문서의 정확한 전체 높이를 구하기 위한 코드const scrollHei..
[React] 리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
[React] 리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
2024.05.03기본 로직타자기로 한 글자씩 입력하는 효과(Typewriter Effect)는 이미 수 많은 라이브러리가 있지만, setInterval 타이머 API를 이용해서 직접 구현할 수 있다. 원래 문장(텍스트)을 한 글자씩 자른 후 가장 앞에 글자부터 하나씩 이어 붙이는 방식이다. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i 깜빡이는 커서 효과는 | 콘텐츠를 갖는 ..