프론트엔드 개발/React.js

리액트에서 마우스가 브라우저 창 밖에 있는지 감지하기

리액트에서 마우스가 브라우저 창 밖에 있는지 감지하고 싶다면 mouseenter, mouseleave 이벤트를 등록하여 hover 상태롤 확인하는 hook을 추가하면 간단하게 감지할 수 있다. 참고로 document.body 의 이벤트로 등록하여, html 의 body를 기준으로 마우스가 enter 인지 leave 인지로 판단해야 하는데 이것을 body가 아니라 현재 컴포넌트를 기준으로도 할 수는 있지만, 현재 컴포넌트가 자주 리렌더링이 되는 컴포넌트라면 예상했던 모습과 많이 다르게 동작할 수 있다. 계속 깜빡깜빡 거리는 식으로 동작할 수 있기 때문에, 어차피 창 전체를 기준으로 동작하는 기능이라면 body를 기준으로 하는게 편하다... // useHoverWindow.ts import { useEffe..

리액트 장치 유형 감지하기

react-device-detect 라이브러리를 사용하면 브라우저 유형 (크롬, 파이어폭스, 사파리, 오페라, IE, Edge) 장치 유형 (모바일, 테블릿, 스마트TV, 콘솔, 웨어러블, 임베디드, 모바일사파리, 아늗로이드, 윈도우폰, IOS) 등의 확인이 가능하다. 그러나 안되는 것도 있다. 테블릿에서 파이어폭스 브라우저를 사용하면 테블릿이 아닌 Desktop로 인식한다. 그래서 어쩔 수 없이 mobile-detect 라이브러리를 섞어 쓰던가 아니면 이 라이브러리로 교체해야 한다. 일단 md.ts 파일을 만든다. // md.ts const MobileDetect = require('mobile-detect') export const md = new MobileDetect(navigator.userAg..

React Query onError 가 동작하지 않는 이슈

https://stackoverflow.com/questions/73427408/react-query-onerror-not-executing-on-thrown-error React-query onError not executing on thrown Error Query: const { data: post, isError, error } = useQuery( ['fetch-post', params], () => fetchPost(params!.postId), { refetchOnMount: true, onError: (err) =>... stackoverflow.com 현재 위와 비슷한 상황에 고통받고 있습니다... API 요청시 Axios Intercepter 를 사용하는 Axios Instance 로 ..

리액트 URL Hash기반의 서브페이지 관리 체계 도입

우연히 서핏에서 리액트 관련 블로그 글을 보다가 NHN의 TOAST 기술 블로그에서 Jotai 라이브러리에 있는 atomWithHash 로 모달 상태를 URL과 동기적으로 관리하는 방법에 대해 소개하는 글을 보았습니다. 회사에서 상태관리 라이브러리로 Redux Store를 사용하고 있어서 Jotai 를 같이 사용할 순 없을 것 같았지만, URL로 상태관리를 한다는 컨샙 자체가 저에겐 상당히 신선했습니다. 거미줄 처럼 엮여있는 지저분한 수 많은 상태 관리용 boolean 값을 모두 없애버릴 수 있는 절호의 기회라는 생각이 가장 크게 들었고, 기존의 라우터와는 독립적으로 동작하기 때문에 라우터나 기존의 코드 사이에 코드를 끼워넣지 않아도 된다는 점이 큰 매리트라고 생각이 되어서 당장 회사에 가서 도입해볼 마..

리액트 이론 정리 (JSX, Component, Virtual DOM)

리액트의 3가지의 대표적인 특징 JSX 문법 Component 기반 Virtual DOM 1. JSX 문법 소개 HTML을 마치 JS처럼 편리하게 사용하기 위한 리액트 JS 확장 문법 HTML 문법을 JavaScript 코드 내부에 쓴 것이다. 빌드 시 Babel에 의해 자바스크립트로 변환된다. React 17릴리즈(대략 2020년 9월 22일) 이전버전은 React를 import 하지 않으면 JSX를 이해하지 못함 import React from 'react'; 규칙 속성은 따옴표로 감싼다. 반드시 태그를 닫는다. 모든 태그는 Self-closing 이 가능하다. 변수값은 중괄호로 감싸서 표현 반드시 div/Fragment태그로 감싸진 형태로 써야한다. return ... // did work cons..

리액트 props.children 이란 무엇인가?

소개 props.children 는 특정 컴포넌트 내부에 다른 컴포넌트를 배치시키고 싶을 때 사용합니다. 아래 코드의 결과는 Hi 입니다. div안에 button이 들어가는걸 원하겠지만, Box컴포넌트는 Hi를 반환하는 기능밖에 업습니다. const Box = (props) => Hi; const App = () => { return ( 버튼 } } → 결과는 Hi div안에 button이 들어가도록 하기 위해서는 props.children으로 전달하여 내부 컴포넌트를 렌더링 해줘야합니다. const Box = (props) => {props.children}; const App = () => { return ( 버튼 } } → 결과는 버튼

React - 프로젝트에서 이미지 경로 찾기

관리 폴더 public 폴더 webpack에 의해 관리됨 PUBLIC_URL 환경변수를 통해 접근 폴더 접근가능 파일 못찾으면 컴파일에러 없이 파일 깨짐 src 폴더 webpack에 의해 관리됨 (import하여 사용가능) 파일 못찾으면 컴파일 에러 발생 import logo from "경로"; require로 불러오기 가능 추가 팁 VS code는 jsconfig.json로 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작가능 index.html 위치한 곳에 jsconfig.json 파일을 생성해준다. 아래와 같이 작성해주면 경로 입력시 src 경로를 기본디렉토리로 하여 찾아준다. { "rootDir": "src", "compilerOptions": { "baseUrl": "src",..

React - useEffect 훅 사용하기 (훅에서 async await 함수 사용 포함)

가져온 데이터를 첫 화면에 출력하고, 업데이트 될 때마다 다시 렌더링하고자 할 경우? 클래스형 컴포넌트를 쓸 경우 라이프사이클 함수를 통해 처리하면 된다. 그러나 두 함수에 같은 코드를 중복으로 넣어야한다. componentDidMount() { ... } componentDidUpdate() { ... } 함수형 컴포넌트 + React Hook을 쓸 경우 useState() + useEffect() 조합을 사용하면 된다. useEffect() 가 componentDidMount()와 componentDidUpdate() 기능을 모두 담당한다. import React, { useState, useEffect } from "react"; const [count, setCount] = useState(0);..

React - 새 프로젝트 생성

자바스크립트를 사용하려면 node.js 를 먼저 설치해야한다. React 단계까지 왔다면 당연히 이미 했을거라서 pass 하겠다. npx create-react-app 프로젝트명 npx는 신규 버전 다운받고 설치 끝나면 지우는 방식입니다. 사용하지 않는 오래된 버전의 모듈을 컴퓨터에 저장하지 않게 해주는 큰 장점이 있습니다. 기본적으로 현재경로 아래의 "프로젝트명"으로 프로젝트를 생성하게되는데 프로젝트의 폴더는 사전에 만들어도되고 안만들어도 상관은 없는것 같습니다.