시작하기 앞서...React Hook Form 을  공통 컴포넌트에 사용을 하는데 다음과 같은 오류가 발생하였다. 바로 FormInput 이라는 컴포넌트가 ref 를 받을 수 없기 때문이다. 그래서 이를 해결하기 위해 forwardRef 를 사용해야 한다.  React Hook Form 에서 ref 받아야 되는 이유FormInput 이라는 input 공통 컴포넌트를 사용하고 있다. React Hook Form 은 내부적으로 ref 를 등록하여 각 폼 요소의 값과 상태를 추적하는 원리로 동작한다. 그래서 React Hook Form 은 register 함수를 사용하여 ref 로 등록하는데 FormInput 컴포넌트에서는 ref 를 전달받지 못해 위에 에러가 발생하는 것이다.  그래서 부모 컴포넌트로부터 자..

시작하며... memo, useMemo, useCallback 사용해서 렌더링 최초화 하기!!시작하기 앞서...제목, 내용, 이미지를 입력하는 페이지에서 내용을 입력할 때마다 사진이 계속 다시 렌더링 되어 깜박거리는 현상을 발견하였다.그래서 이를 해결하기 위해 렌더링을 최소화하jjang-j.tistory.com지난 게시물을 보면 이미지가 계속 렌더링 되어 깜박거리는 현상을 useMemo 를 사용하여 해결하였다. 그러나 이미지 미리보기 URL 을 만들기 위해 사용했던 URL.createObjectURL() 의 MDN 문서를 보니 더 이상 사용하지 않을 땐  URL.revokeObjectURL() 를 사용해서 하나씩 해제해줘야 한다고 적혀있는 것을 발견했다.  그래서 리액트 Side Effect 의 Clea..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) React 개발 도구 설치React 에서 디버깅을 하기 위해 크롬 확장 프로그램 중에서 React Developer Tools를 설치해야 한다. 정상적으로 설치가 되면 크롬 우측 상단 확장 도구 모음에 React 로고가 생긴 것을 확인할 수 있게 된다. 현재 티스토리 블로그도 React 로 만들어졌기 때문에 활성화된 것을 확인할 수 있고만약 React 개발 모드라면 로고가 빨간색으로 되어 있으며React 로 만들어지지 않는 웹사이트는 회색으로 표시되게 된다. React 개발 도구 활용하기 React Developer Tools를 설치하게 되면 이제 개발자 도구에서 Components 와 Profiler 메뉴가 추가된다. Com..

시작하기 앞서...제목, 내용, 이미지를 입력하는 페이지에서 내용을 입력할 때마다 사진이 계속 다시 렌더링 되어 깜박거리는 현상을 발견하였다.그래서 이를 해결하기 위해 렌더링을 최소화하는 방법을 찾아보았다. React Developer Tools크롬 확장 프로그램 중에서 React Developer Tools 를 설치하고개발자 도구 -> Profiler -> 설정에서 Highlight updates when components render 를 클릭하면 어디서 렌더링이 발생하는지 시각적으로 확인할 수 있게 된다. 그러면 아래 사진처럼 렌더링이 일어나는 부분에 노란색 테두리가 생기게 된다.입력되는 부분은 내용인데 불필요하게 사진이 있는 곳까지 다시 렌더링 되어 사진을 화면에 보여주다 보니 깜박거리는 현상이 ..

React 에서의 SVG그동안 React 에서 SVG 를 사용할 때 컴포넌트로 만들어서 사용하였다.컴포넌트로 만들고 해당 SVG 의 width, height, 색상을 직접 조절할 수 있게 아래 코드처럼 만들어 사용하였다.그런데 svg 를 jsx 컴포넌트로 만드는 과정은 매우 귀찮고 번거롭다 🥲 반면 Next.js 에서는 SVG 를 다루는 과정이 React 보다 너무 쉽고 간편하다! Next.js 에서의 SVGNext.js 에서 SVG 를 컴포넌트로 사용하려면 아래 단계를 거쳐야 한다. @svgr/webpack 설치SVG 를 컴포넌트로 변환시켜 주는 플러그인 패키지인 @svgr/webpack 를 다운로드한다.npm install @svgr/webpack 웹팩 설정 추가next.config.js 에 웹팩..

React 의 한계리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 앱의 첫 로딩시간이 길고, SEO 가 좋지 않다는 단점이 있다. 그래서 웹 사이트를 요청할 때 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩한다. 이로 인해 앱의 첫 로드 시간이 오래 걸려 사용자 경험을 해치게 된다. Next.js 란?Next.js 는 React의 프레임워크로 React 애플리케이션을 더 쉽게 만들고 배포할 수 있는 다양한 기능을 제공한다. 예를 들어 리액트는 라우팅하기 위해 react router 나 tanstack router 등 여러 도구 중 하나를 선택할 수 있지만, 넥스트는 내장된 기술을 사용한다. Next...

시작하기 앞서기존 자바스크립트로 만든 프로젝트에서 새로운 프로젝트를 생성하지 않고 그 프로젝트에서 타입스크립트로 마이그레이션 하는 방법에 대해 알아볼 것이다. 마이그레이션 방법1. TypeScript 설치타입스크립트과 타입스크립트에 필요한 기타 모듈들을 설치한다.npm install --save typescript @types/node @types/react @types/react-dom @types/jest2. tsconfig.json 작성기존 자바스크립트에 있던 jsconfig.json 을 제거하고 tsconfig.json 파일을 작성한다.나는 아래 코드에 있는 내용을 작성했다.{ "compilerOptions": { "baseUrl": "src", "target": "es5", "..

시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하기 위해 글을 작성하게 되었다. Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com  Framer motion 적용Framer motion 을 사용한 다섯 가지 애니메이션을 적용할 것이다.버튼 애니메이션모달 애니메이션스크롤 애니메이션화면 전환 애니메이션 우선 Framer motion 을 사용하기 위해 해당 라이브러리를 설치한다.npm install framer-moti..

☘️ 시작하기 앞서...나는 지금까지 프로젝트를 진행하면서 Prop Drilling 문제를 해결하기 위해 전역 상태 관리 라이브러리인 Redux, Recoil, Zustand 를 사용해 본 경험이 있었다. (완전 얕게...) 그리고 form 데이터는 React Hook Form 의 formProvider 를 사용해 보았다. 그런데 웃기게도 React 에 기본적으로 내장되어 있는 전역 상태를 할 수 있는 Context API 를 모르고 있었고 사용해 본 경험이 없었다.하지만 코드잇 강의를 들으면서 Context API 에 대해 배우게 되었고 그 이후에 프로젝트에 직접 적용해 보고 그전에 사용해 본 상태관리 라이브러리와 비교해서 어떤 점에 장단점이 있는지 알게 되었다. 그래서 이번 글에서는 Context A..

☘️ 문제점React 에서 컴포넌트의 틀을 직접 코드로 작성하다 보면 번거롭고, 복붙을 하게 되면 실수하는 경우가 발생한다.그래서 이러한 문제점을 해결하기 위해 코드 스닛펫을 사용하여 간편하게 코드의 틀을 만들 수 있어 시간을 절약할 수 있다. ☘️ 코드 스닛펫 Extension코드 스닛펫을 간단하게 익스텐션(Extension)을 이용해 사용할 수 있다.다양한 익스텐션이 있는데 그중에서 내가 사용하는 익스텐션은 Reactjs code snippets 이다. 해당 익스텐션의 스니펫의 종류는 Reactjs code snippets 에서 자세히 볼 수 있다. 코드 스닛펫 익스텐션 - 사용 방법다양한 스니펫 중에서 내가 제일 많이 사용하는 건 rsc 이다.아래처럼 키워드를 입력하고 엔터를 누르면 자동으로 코드가..