React 기초

React Virtual Dom (가상돔) React의 주요 특징 중 하나는 가상돔을 사용한다는 것이다. 가상돔을 왜 사용하는지 알기 위해 브라우저가 렌더링 하는 과정을 알아보자. [ 웹 페이지 빌드 과정 (Critical Rendering Path CRP ) ]

React.Memo를 사용해 불필요한 리렌더링 방지 리액트 개발을 하다보면 눈에 보이지는 않지만 많은 컴포넌트들이 불필요하게 리렌더링 되는 경우들이 많다. 실제로 console.log를 찍어 확인해 보면 무수히 많은 로그들이 촤라라 올라오는 것을 확인할 수 있다. 오

컴포넌트가 렌더링 될 때 내부에 있는 함수들도 다시 만들어지게 된다. 똑같은 함수를 렌더링 될 때 마다 새로 만드는 것은 좋은 현상은 아니며 해당 함수를 자식 컴포넌트에게 props로 전달할 경우, 새로운 props로 인식하고 리렌더링이 발생한다. 오늘은 useCall

useMemo는 연산이 오래걸리는 함수의 호출 결과를 저장하고 동일한 param 값이 입력 되었을 때 캐싱된 결과를 반환하여 최적화 시켜준다.param 인 a, b값이 동일 할 경우, 이전의 캐싱 데이터를 사용한다.

useRef로 특정 Dom 선택 및 컴포넌트 변수 생성 > 특정 DOM을 선택 하기 위해서는 getElementById, querySelector를 사용해왔다. 리액트에서는 useRef 훅을 사용해 컨트롤이 가능하고 컴포넌트 안에서 조회 및 수정을 할 수 있는 변수

1. 서론 1) React-Query란? 어플리케이션의 비동기 데이터를 쉽게 관리할 수 있으며 캐시 및 동기화 기능을 제공하는 React용 라이브러리 실시간 데이터 패칭, 페이지네이션, 오류 헨들링 등 유용한 기능 제공 2) 장점 서버의 상태를 불러오고 캐싱하며,

next.js 기반 프로젝트 생성비동기 통신 라이브러리 및 서버 관련 라이브러리 설치QueryClientProvider 생성Data 설정 \- json-server 설정db.json 파일 생성package.json에 server 추가랜더링 화면 (index.js)실행

기본적으로 쿼리들은 4개의 상태를 가지며, useQuery가 반환하는 객체의 프로퍼티로 상태를 확인할 수 있다.Fresh새롭게 추가된 쿼리 인스턴스로 active 상태의 시작 상태이다. staleTime 동안 fresh 상태로 유지되는데, 이 동안에 쿼리가 다시 마운트

주로 서버의 데이터를 요청하는 GET 메서드의 경우 useQuery, useQueries를 사용한다.하지만, 서버의 데이터를 바꾸는 POST, PUT, DELETE 메서드에 대해서는 useMutation을 사용하는 것을 권장한다.이 때, onSuccess, onErro