코드노트

useTransition이란?useTranstion은 React18에서 도입된 Concurrent Rendering 기능의 일부로, UI 반응성과 성능을 개선하기 위해 "덜 중요한 작업을 늦춰서 처리" 하는 훅이다. 사용자가 빠르게 반응을 체감해야하는 작업이 있다면 가벼운 작업과 무거운 작업을 분리 할 수 있으며, UI의 지연(Lag)을 줄이는데 효과가 있다. - 가벼운 작업 예시 : 버튼 클릭, 입력 필드 타이핑 등- 무거운 작업 예시 : 목록 필터링, 차트 업데이트 등언제 사용할까?대량 데이터 필터링, 렌더링, 정렬애니메이션, 차트, 목록 등 복잡한 UI 업데이트사용자의 입력 반응은 빠르게 결과는 나중에 처리하고 싶을 때사용하지 않아도 되는 경우상태 업데이트가 가벼운 경우비동기 fetch 작업 위주로..

리액트에서 utils, 컴포넌트, 페이지 들을 작업하면서 모듈로 작업을 했을때 ../../../ 경로를 절대경로로 하는 방법을 알아보자. 먼저 바벨 플러그인을 설치 babel-plugin-module-resolver Module resolver plugin for Babel. Latest version: 5.0.2, last published: 2 days ago. Start using babel-plugin-module-resolver in your project by running `npm i babel-plugin-module-resolver`. There are 1423 other projects in the npm registry using babel-plu www.npmjs.com npm i ..

리액트를 하면서 useRef를 사용하며, 여러개의 Ref를 사용하게 된다면 어떻게 해야할까? 리액트 네이티브를 공부하면서 input을 컴포넌트로 관리하다가 Ref를 사용하여 다음 input으로 넘겨야했다. 하나의 refRef input컴포넌트 내에서 관리중이였고, 외부에서 컴포넌트에 Ref를 또 넘겨주어야했다. Ref를 2개를 사용할 수는? 있다. ForwardedRef를 사용하자. 더군다나 타입스크립트로 작업중이라면 머리가 더 복잡해질 수 있지만 이번에 컴포넌트를 만들면서 어느정도의 개념이 잡힌것 같다. mergeRefs 함수 function mergeRefs(...refs: ForwardedRef[]) { return (node: T) => { refs.forEach(ref => { if (ref &..

현제 사이드프로젝트로 간단한 앱을 만들면서 TextInput으로 회원가입, 로그인을 구현하였다. 기능들이 기존 html input태그와 많이 달랐고 사용할 수 있는 속성들도 많았던거 같다. pwa도 진행을 해봤지만 역시 일반적으로 리액트로 진행하는것보다 네이티브가 좋은것 같다... 리액트 네이티브를 하면서 느낀거지면 모바일에 최적화되어있는것도 있지만 기본적으로 제공하는 속성들만 잘 활용하더라도 간단한 앱에서 사용하는것들은 구현하기가 쉬울것 같은 느낌..! onChangeText: 텍스트가 변경될 때마다 호출되는 함수를 설정 placeholder: 입력 필드에 표시되는 텍스트를 설정 placeholderTextColor: placeholder 텍스트의 색상을 설정 editable: 사용자가 텍스트를 입력..

현재 사이드 프로젝트를 진행하면서SWR을 사용해보자는 생각으로 시작했다.그렇게 리액트쿼리랑 조금씩 멀어지면서 느낀건 리액트쿼리 만한 라이브러리가 없다는 것... 프로젝트가 끝나가면서 팀원들과 디자인을 새로 변경해보자는 의견이 나왔고..새로 디자인 작업을 하면서 지금까지 만든 로직들을 전부 변경해야하는 일이 발생했다. 그렇게 api도 조금씩 수정해나가야했는데 그냥 리액트쿼리로 변경할까요? 라는 의견에 다른 프론트엔드 팀원도 좋다고하여 리액트쿼리로 다시 변경했다. 작업 전 리액트쿼리 공식문서를 다시 읽었다. 내가 모르는것들이 많았다...이번에 리액트쿼리 v5를 사용하면서 기존에 있었던 것들과 추가된 것들에 있어서 더 편하게 사용할 수 있는 기능들을 정리해보려고 한다.그리고 알고 넘어가야 하는것들도 같이..!..

리액트는 가상 돔을 사용하여 실제 돔에 업데이트 시킨다. 여기서 나오는 가상돔이 무엇인지 정리를 해보려고 한다. 리액트 Virtual DOM에 관련해서는 면접 질문에서도 자주 나오게 된다. Virtual DOM에서 DOM이 무엇인지 알아보자. DOM - DOM은 Document Object Model의 약어로 웹 페이지를 프로그래밍 언어가 이해할 수 있는 구조로 표현한 것이다. DOM은 문서의 구조를 트리 형태로 나타내는데. 이트리의 각 노드는 객체를 나타낸다. HTMl 문서가 웹 브라우저에 로드되면 브라우저는 HTML 태그들을 파싱하고 DOM 요소를 생성한다. 이렇게 생성된 DOM은 자바스크립트를 통해 조작이 가능하다. DOM API - 자바스크립트는 DOM API를 사용하여 웹페이지 내의 요소들을 선..

ReactDOM.createPortal(child, container) - createPortal은 리액트에서 DOM트리 의 다른 위치에 컴포넌트를 렌더링을 할 수 있는 기능 - 기본적으로 컴포넌트는 컴포넌트 트리의 노드로 렌더링이 되지만, 컴포넌트를 루트 DOM요소 밖의 다른 위치에 렌더링해야 할때 사용할 수 있다. - 간단하게 말하면 첫번째 인자는 자식요소, 두번째 인자는 자식요소를 렌더링할 DOM요소 ex) 모달, 툴팁, 독립적인 컴포넌트 등등 이번 프로젝트에서 모달을 사용하면서 css를 사용하여 z-index를 조절하여 모달을 만들었는데 createPortal을 사용하는것이 좋다고 한다. 아니 맞는것 같다. - 모달은 기존 컴포넌트 구조와 격리되어야한다. - 컴포넌트와 상호작용하는 문제가 발생할 ..

리덕스는 전역 상태관리 라이브러리이다. 리액트쿼리, SWR, zustand, recoil 등 여러 상태관리 라이브러리가 있지만 기본으로 알고가야하는 라이브러리가 리덕스라고 생각한다. 리덕스의 구조와 Flux패턴에 대해서 정리를 해보려고 한다. 리덕스의 구조를 알아보기전 MVC패턴과 Flux패턴을 알아보자 MVC 패턴 MVC 패턴은 Flux 패턴이 등장하기전 사용되던 디자인 패턴이다. Model : 데이터 보관 및 정의 Controller : 데이터에 대한 수정, 조회 등의 역할 View : 데이터를 화면에 보여주는 역할 - Model에 데이터를 정의해 두고, Controller를 이용해서 Model 데이터를 생성, 조회, 수정, 삭제 등을 하여 변경된 데이터를 View에 출력하여 사용자들에게 보여줄 수 ..

JS에서 try/catch를 사용한 것 처럼 리액트에서 에러를 다루는 ErrorBoundary를 사용해보려고 한다. class문법으로 생긴걸 보고 정이 가지 않았지만.. 왜 ErrorBoundary를 사용해야할까? try/catch - 코드 블록 내에서 발생하는 오류를 처리한다. - 이벤트 핸들러, 비동기 코드, ssr 등등에서 try/catch를 사용한다. ErrorBoundary - 우리는 React를 통하여 컴포넌트를 사용하여 구현한다. 여기서 컴포넌트중 하나가 에러가 발생하게 되면? 한곳에서 발생하게 되는 에러때문에 App은 멈추게 될것이다. - try/catch를 사용했던것처럼 리액트에서는 Error Boundary를 통해서 에러를 핸들링 할 수 있다. - 쉽게말하면 렌더링 또는 하위 구성 요소..

useMemo가 아니라 React.memo? memo는 useMemo만 있는게 아니였나.. 했지만 React.memo도 있었다.. 쉽게말하면 불필요한 컴포넌트 렌더링을 방지하는 훅! 그럼 useMemo와는 어떻게 다를까? React.memo와 useMemo, useCallback을 모두 정리해보려고 한다. useMemo const value = useMemo(() => { return 함수() }, [item]) ------------------------ const value = useMemo(() => { return 함수() }, []) - 첫 번째 인자는 콜백함수를 받는다. 두번 째 인자는 의존성 배열(Dependency)을 받으며, 두번째 인자인 배열의 요소의 값이 업데이트 될 때만 콜백 함수를..