Q. 질문리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #6) A. DomDOM 이란?DOM(Document Object Model) 은 웹 페이지의 구조와 내용을 표현하는 데 사용한다. 하지만, DOM 의 변경이 생길 때마다 브라우저는 화면을 다시 그리고 다시 렌더링 하게 된다.이러한 과정은 복잡한 UI 에서는 성능 문제를 일으킬 수 있다. 레이아웃을 다시 계산하며 페이지를 다시 그리는 작업을 하다보니, 성능 저하의 주요한 원인이 되고 비용 문제가 발생한다. 그래서 이러한 문제점을 개선하기 위해 React 에서는 Virtual Dom 이라는 것을 사용한다. A. Virtual DOMVirtual DOM 이란?React 에서는..

☘️ 시작하며... 현재 프로젝트에서 Zod 와 React-Hook-Form 조합으로 입력폼 내용을 구현하고 있고 아래 사진처럼 스키마 객체를 생성하여 폼 제출 시 유효성 검증을 만족하지 못하면 토스트 UI 가 뜨도록 구현을 했다. 현재 신고하기 기능을 구현하는 중이며, 신고종류를 라디오 버튼을 사용하여 고르게 되는데, 이 때 스키마객체에서 신고종류의 타입을 enum 으로 설정하였다. 그래서 신고종류를 선택하지 않고 폼을 제출할 경우, 에러 토스트 UI 를 띄우려는데 아무생각없이 다른 타입처럼 enum 이 min 값을 1을 만족하지 못하였을 때, message 를 다음과 같이 설정하려고 했다. // 적용 X reportType: z .enum([report, ...otherReport]) .min(1, ..

☘️ useRef 란?useRef 는 React Hook 중 하나이며, 공식 문서에 따르면 useRef 를 다음과 같이 설명한다. useRef.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지[출처: React 공식문서] useRef 는 DOM 요소에 직접 접근하기 위해 사용되며, 변하는 값을 유지하기 위해 사용된다.그래서 버튼을 눌러 원하는 요소로 스크롤하기 위해 Dom 요소에 직접 접근하는 useRef 가 사용된다. ☘️ 구현하기화면 만들기먼저 기본적인 화면을 만들어 준다.// App.jsximport './App.css';function App() { return ( ..

☘️ 시작하기 앞서 현재 진행하고 있는 프로젝트를 구현하면서 사용한 React Query(Tanstack Query) 의 staleTime 에 대해 알아 볼 것이다. 이를 사용하면서 불필요한 API 요청을 줄일 수 있으며 매우 유용하다 생각이 들어 글로 작성하게 되었다. 그 밖에도 React Query 를 사용하여 단순하게 데이터를 요청하는 게 아니라 유용한 기능들이 있다는 것을 직접 사용하면서 알게 되었다. 특히 프로젝트를 진행하기 전에 공식문서를 한국어로 번역한 깃허브 글을 본 것이 매우 도움이 되었다! 혹시 React Query 를 사용한다면 이 글을 정독하는 것을 추천한다 GitHub - ssi02014/react-query-tutorial: 😃 TanStack Query(aka. react qu..

시작하기 앞서...최근 진행했던 프로젝트에서 편지 글 쓰기 페이지 를 구현을 했는데 이를 구현하기 위해 React-Hook-Form 을 사용하고 있다.그런데 개발하면서 정말 좋고 편리한 기능이 있어 이렇게 글을 작성하게 되었다.  실제로 개발을 하다보면 여러 컴포넌트가 생기게 된다.이럴 때 매번 props 로 컴포넌트간 데이터를 다 전달하기엔 너무 복잡하고 힘이 든다. (prop drilling 이 발생)이러한 상황에서 쉽게 폼 데이터를 사용하는 방법이 바로 FormProvider 이다!!!!!!!    또한 개발을 할 때, 폼에 제출할 내용이 input, textarea, select 이런 태그가 아닐 때도 발생한다. 아래 사진은 내가 현재 구현한 페이지인데 input 태그로 만들지 않은 것들은 {....

+) next.js 에서 Zustand persis 사용하기 (feat. Hydration error)https://jjang-j.tistory.com/124 [Next.js] Zustand persist 사용하기 (feat. Hydration 에러 해결)시작하며...현재 프로젝트의 상태 관리 라이브러리로 Zustand 를 사용하기로 했다.사용하기 간편한 상태 관리 라이브러리 중에서 꾸준히 업데이트되면서 다운로드 수가 많은 Zustand 를 선택하게 되jjang-j.tistory.com 시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경우stat..

☘️ 시작하며...React 18 의 기능으로 Suspense 가 있다. 그러면 Suspense 가 무엇일까? Suspense하단에 있는 일부 컴포넌트가 아직 렌더링할 준비가 되지 않은 경우 로딩을 나타낼 수 있도록 해주는 것[출처]: 공식문서이러한 Suspense 를 서버 상태관리 라이브러리인 TanStack Query(React Query) 와 함께 안정적으로 사용할 수 있다. 그래서 어떻게 사용하지는 지 알아볼 예정이다. ☘️ Suspense만약 TanStack Query 에 대해 잘 모를 경우 해당 게시물에서 이에 대한 내용을 확인할 수 있다. Suspense 세팅React 에 내장된 Suspense 을 import 해주고import React, { Suspense } from 'react';Su..

시작하며...내 블로그에 [React] 리액트 쿼리(React-Query) 사용 방법 이런 게시물이 있다.그리고 당시 했던 프로젝트를 보니깐 React Query 의 버전이 3이었다. 그러나 현재 V5 까지 있으며, React 이 외에도 Vue 등에서도 사용이 가능해지면서 TanStack Query 로 이름을 바꿨다고 한다. 그래서 더 자세히 공부할 겸 새로운 내용들을 알기 위해 글을 작성하기로 했다. TanStack Query V5정의TanStack Query 란 무엇일까? TanStack Queryit makes fetching, caching, synchronizing and updating server state in your web applications a breeze.웹 애플리케이션에서 서버..

개발 프로젝트를 진행하기 앞서 고려해야 될 것이 있다.바로 CSS Reset(리셋) 과 CSS Normalize(노멀라이즈) 중에서 어떤 것을 선택할 지 이다. ☘️ CSS Reset / Normalize 사용 이유그렇다면 CSS Reset 과 CSS Normalize 는 왜 사용하는 것일까? 브라우저 간 일관성 확보우리가 사용할 수 있는 브라우저는 크롬, 사파리, 엣지, 파이어폭스 등 매우 다양하다.하지만 이러한 브라우저는 자체 기본 스타일을 가지고 있어 브라우저마다 다르게 보일 수 있다는 것이다.그래서 이러한 일관성 확보하고, 브라우저 간 차이를 줄이기 위해 사용한다. ☘️ CSS Reset vs CSS Normalize그렇다면 둘 중에 어떤 것을 사용해야 할까? CSS ResetCSS Reset 은..

시작하기 앞서...(참고로 react + vite + typescript 프로젝트)프로젝트를 진행하다 보면 경로가 길어져서 코드가 지저분해 보이고 한 눈에 들어오지 않게 된다.import LoginComponent from './components/LoginComponents/LoginComponent';그래서 path alias 를 설정하여 import 경로를 간단하게 줄일 수 있다. tsconfig.json 수정tsconfig.json 에서 원하는 경로 별칭을 설정한다.나는 src/ -> @/ 그리고 src/components/LoginComponents/ -> @/LoginComponents 로 설정하였다.{ "compilerOptions": { ... /* Path Alias */ ..