react
[TS] 엘리먼트의 기본 어트리뷰트 인터페이스/타입 사용하기
[TS] 엘리먼트의 기본 어트리뷰트 인터페이스/타입 사용하기
2024.05.12HTMLAttributescheckbox 타입의 엘리먼트를 사용하는 Toggle 컴포넌트를 만든다고 가정해보자. 엘리먼트는 autoFocus, required, readOnly 등의 기본 어트리뷰트 가진다. 만약 엘리먼트가 기본적으로 받을 수 있는 어트리뷰트를 Toggle 컴포넌트의 props로 넘기고 싶다면? 모든 어트리뷰트에 대한 인터페이스를 정의해야 할까? 이땐 InputHTMLAttributes 타입을 사용하면 된다. 그럼 각 어트리뷰트의 prop 타입을 일일이 정의하지 않아도 된다. 제네릭 T는 onChange 이벤트 핸들러의 엘리먼트 타입이 들어가므로 HTMLInputElement 같은 타입을 넘기면 된다.// InputHTMLAttributes 구조 | node_modules/@types/r..
[JS] 왜 JSX 안에선 if 문을 사용할 수 없을까? 표현식과 문 차이점
[JS] 왜 JSX 안에선 if 문을 사용할 수 없을까? 표현식과 문 차이점
2024.05.12TL;DR￭ 자바스크립트 프로그램은 일련의 문(Statement)으로 구성된다￭ 각 문은 변수 생성, if, else 조건 실행, 루프 시작과 같은 작업을 수행하는 명령이다￭ 표현식은 값을 생성하는 자바스크립트 코드다 → 표현식은 항상 값을 생성한다￭ 모든 함수의 인자는 표현식이다. 문은 값을 생성하지 않으므로 함수 인자에 사용할 수 없다￭ 문은 프로그램을 하나로 묶는 단단한 구조이며, 문의 세부사항은 표현식으로 채워진다￭ 표현식은 단독으로 존재할 수 없고, 항상 문의 일부다￭ 문은 표현식 슬롯을 제외하곤 본질적으로 비어있다￭ 문이 비어 있을 때도 표현식은 항상 문의 일부다￭ JSX의 {} 중괄호는 표현식 슬롯을 만든다￭ 표현식 슬롯에선 값을 생성하지 않는 문은 사용할 수 없다 표현식 | Expressi..
[TS] useQuery, useMutation의 제네릭 타입 살펴보기 / Base Query 훅 만들기
[TS] useQuery, useMutation의 제네릭 타입 살펴보기 / Base Query 훅 만들기
2024.05.12React Query에서 제공하는 useQuery, useMutation을 그대로 사용하면 항상 쿼리키와 쿼리 함수를 지정해야 하는 번거로움이 있다. API 유형에 따라 Base Query|Mutation 커스텀 훅을 만들어 두고 사용하면 쿼리키와 쿼리 함수를 일일이 지정하지 않고 여러 곳에서 재사용하기 좋다. 하지만 커스텀 훅을 만들 때 쿼리 타입을 지정하지 않으면 데이터가 unknown, any인 경우가 많아서 어떤 데이터를 다루는지 알기 어렵다. 쿼리 타입은 대부분 제네릭으로 되어 있는데 이를 잘 사용하면 타입을 보장 받으면서 데이터를 편리하게 다룰 수 있다. useQuery제네릭 타입 톺아보기 ⚡️export declare function useQuery ❶ TQueryFnData : 쿼리 함수 ..
[React] 리액트 쿼리(React Query) staleTime을 설정하는 3가지 방법
[React] 리액트 쿼리(React Query) staleTime을 설정하는 3가지 방법
2024.05.12React Query에서 staleTime은 쿼리의 만료 시간을 설정할 때 사용한다. staleTime이 지나면 쿼리의 캐시 데이터를 오래된 데이터로 간주하고 re-fetching을 시도한다. React Query에선 기본적으로 캐시 데이터 자체를 stale 데이터로 취급하기 때문에 staleTime의 기본값은 0이다. 하지만 변경 주기가 느린 데이터는 서버에 빈번하게 요청할 필요가 없기 때문에 staleTime을 적절하게 조절해주는 작업이 필요하다. 💡 중복 호출을 줄이기 위한 staleTime은 최소 20초 정도가 적당하다 — via tkdodo 1. 개별 쿼리 인스턴스에 staleTime 설정// v4useQuery('users', getUsers, { staleTime: 1000 * 60 });..
[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR
[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR
2024.05.12기본 사용법설치yarn add "@svgr/cli"yarn add -D "@svgr/webpack" CLI 명령어💡 경로만 입력하면 svg path를 지정하는 것과 동일. -- double dash는 커맨드 옵션이 끝난다는걸 의미하므로(참고글) -- 뒤에 경로를 입력하면 svg path가 지정됨(옵션이 없다면 굳이 안붙여도 됨).# config 파일이 없을 때 # svgr -d svgr ./assets/icons/raw/bulb.svg -d ./assets/icons/dist# config 파일이 있을 때# svgr --config-file -d svgr --config-file ./svgr.config.js ./assets/icons/raw/bulb.svg -d ./assets/icons/dis..
[React] 리액트 Context API 렌더링 최적화하기
[React] 리액트 Context API 렌더링 최적화하기
2024.05.11TL;DR리액트에서 제공하는 ContextAPI를 사용하면 원하는 상태(값)를 전역적으로 사용할 수 있다. 컴포넌트끼리 특정 상태를 공유할 때도 유용하다. 하지만 Context.Provider 하위에서 컨텍스트를 구독하는 모든 컴포넌트는 값을 변경할 때마다 리렌더링 된다. Context.Provider 값이 업데이트되면 useContext 훅이 최신 컨텍스트 값을 사용해 컴포넌트 리렌더를 트리거하기 때문이다. 이처럼 ContextAPI는 렌더링 최적화에 일일이 신경써야하는 단점이 있다. 여러 최적화 방법중에서 상태/디스패치 단위로 컨텍스트를 쪼개는 방식이 가장 간단하다. 대신 Provider가 너무 많아지는 단점(Wrapper Hell)이 있다. Context 상태가 변경될 때마다 해당 Context.P..
[TS] 타입스크립트에서 CSS Module 사용하기
[TS] 타입스크립트에서 CSS Module 사용하기
2024.05.11타입스크립트 CSS Module 오류 해결타입스크립트에서 CSS Module을 사용하면 모듈/선언을 찾을 수 없다는 타입 에러가 나온다. src 혹은 컴포넌트 폴더에 아래 내용이 담긴 typings.d.ts 파일을 추가하면 해결할 수 있다. via StackOverFlow// Toggle/typings.d.tsdeclare module '*.module.css' { const classes: { [key: string]: string }; export default classes;} CSS Module 사용법❶ [name].module.css 형태로 CSS 모듈 파일을 작성하고/* Toggle/Toggle.module.css */.toggle-bg:after { /* ... */} ❷ 컴포넌트에서 ..
[React] falsy 값을 사용한 리액트 조건부 렌더링시 주의할 점
[React] falsy 값을 사용한 리액트 조건부 렌더링시 주의할 점
2024.05.11리액트에선 null, undefined, boolean 이렇게 3가지 타입만 렌더링을 건너뛰는 점 기억 자바스크립트에서 0(혹은 -0, 0n)은 6가지 falsy 값 중 하나다. && AND 논리 연산자는 첫번째 falsy 값을 찾아서 반환하고, falsy 값이 없으면(피연산자가 모두 true이면) 마지막 피연산자를 반환한다(반대로 || OR 연산자는 첫 번째 truthy 값을 찾아 반환하고, truthy 값이 없으면 && 연산자처럼 마지막 피연산자를 반환한다).0 && 'bit'; // 0-0 && 'bit'; // -00n && 'bit'; // 0n React에서 조건부 렌더링 코드를 작성할 때 && 연산자를 자주 사용한다. 아래 예시에서 count 변수에 담긴 0은 falsy 값이므로 화면에 아무..
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
2024.05.11문법특정 요소가 위치한 곳까지 스크롤을 이동하고 싶을 때 element.scrollIntoView 메서드를 이용하면 간편하게 구현할 수 있다. scrollIntoView 메서드는 총 3가지 방법으로 사용할 수 있다. (MDN)element.scrollIntoView(align) ❶ 파라미터 없음 — element가 브라우저 화면 가장 위로 오도록 스크롤(정렬)element.scrollIntoView(); // element.scrollIntoView(true)와 동일 ❷ boolean 파라미터// { block: "start", inline: "nearest" } 옵션과 동일element.scrollIntoView(true); // { block: "end", inline: "nearest" } 옵션과 ..
[React] 리액트 Render Props 패턴 2가지 사용 방법
[React] 리액트 Render Props 패턴 2가지 사용 방법
2024.05.11children Prop을 이용해 컴포넌트 합성(component composition) 형태로 작성하면 부모 컴포넌트를 수정하지 않고도 자식 컴포넌트를 자유롭게 추가해서 사용할 수 있다. 일반적으로 데이터(상태) 공유는 상태 끌어올리기 방법이 가장 간단하지만 최상위 컴포넌트가 데이터(상태)와 모든 하위 컴포넌트를 갖고 있으면 해당 상태와 관련 없는 모든 하위 컴포넌트도 렌더링에 영향을 주는 단점이 있다(상태 끌어올리기로 부모 컴포넌트 상태가 변경돼서 업데이트하면 하위 컴포넌트도 다시 렌더링 하므로). 이땐 Render Props 패턴을 활용할 수 있다. 어떤 컴포넌트를 렌더링할지에 대한 로직을 상위 컴포넌트가 결정하고, 하위 컴포넌트는 자신이 관리하는 상태를 인자로 받은 render(혹은 childre..
[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 관찰 대상 요소도 렌더링 하지 않으므로 문제가 없는것처럼 보이기 때문에 ..