[React]JS의 Sync/Async
JS는 기본적으로 synchronous하게 실행된다. ‘동기방식’이라는 뜻으로 쉽게 설명하면 위에서부터 순차적으로 실행된다는 뜻이다. 하지만 비동기적으로 작동되는 함수들도 존재한다. 주로 시간이 걸리는 함수들이 비동기적(Async)으로 작동하며 대표적인 함수는 다음과 같다. ajax, Event LIstener,...
[React]성능을 개선해보자3 (automatic batch, useTransition, useDeferredValue)
세번째 로딩성능 개선 Automatic Batch 리엑트는 기본적으로 automatic batch를 지원한다. state변경이 근처에서 발생하면 마지막에 발생한 state 변경함수에서만 재랜더링이 발생한다. 그러나 예외가 있다. 18버전 부터 특정 조건아래 automatic batching기능이 작동안하도록 바뀌었다....
[React]성능을 개선해보자2 (재랜더링 방지)
두번째 성능 개선 방법(재랜더링 방지) React의 특성으로 부모 컴포넌트에서 상태가 변경되어 재랜더링에 들어가면 자식 컴포넌트도 전부 재랜더링을 한다. 예를들면 다음과 같은 components가 있다고 가정하자 function Child() { return <div>Child</div> }...
[React]성능을 개선해보자 (Lazy import)
리엑트의 대표적인 성능 개선 태크닉 (Lazy import) SPA의 특징은 다음과 같다. npm build를 발행하면 js파일 하나에 모든 코드를 다 쑤셔 넣는다 = 사이즈가 매우 크다. 이러면 로딩속도가 느려질 수 밖에...
[React] 실시간 쿼리를 위한 react-query
React Query를 써보자 React-Query를 왜 쓸까? 데이터를 요청할때마다 다양한 상황에 맞춰서 코드를 짜야하는 경우가 많다. 예를들면 ajax 성공/실패시 무엇을 보여줄 것인가 몇초마다 ajax를 요청해야하는 경우 요청 실패시 요청 재시도는 어떻게?...
[React] 개발자도구를 사용해서 Debug하자
개발자 도구를 사용해보자 브라우저에서 F12를 누르면 브라우저 개발자 도구가 뜬다. 다만 컴포넌트 구조같은 상세한 내용을 확인하기가 어렵다. 이럴때 Chrome 웹스토어 > react DevTools를 사용하면 디버깅할때 좀더 편하다 기능1. Components탭 이를쓰면...
[React] LocalStorage를 사용해보자
localStorage를 사용해보자 기본적으로 모든 상태는 새로고침하면 초기값으로 돌아간다 하지만 값을 저장해야할 경우도 반드시 존재한다. 본래 DB를 생성해 DB에 저장하는것이 맞지만, 임시적으로 사용할 수 있는것이 local Storage이다. 반영구적으로 저장 가능하다. LocalStorage...
[React] Redux3 - Object와 Array를 관리해보자
리덕스(Redux) 심화과정 - Object, Array를 관리해보자 Object의 값을 관리하려면 다음과 같이 작성하면 된다. //store.js let user = createSlice({ name: 'user', initialState : { name : 'kim', age : 20 },...
[React] 리엑트에서 자주쓰는 조건문 정리
리엑트에서 조건문을 통해 JSX 구성하기 리엑트를 사용하다보면 조건문을 사용해 특정조건에 요소를 보여줄지 말아야할지 정해야하는 경우가많다. 이럴때 응용 및 사용 할 수 있는 다양한 조건문을 알아보자 1. 컴포넌트 안에서 쓰는 if/else...
[React] Context API의 단점을 해결하는 Redux
리덕스(Redux)란? 앱레벨의 상태를 관리하는 라이브러리 (app-level-state management) 여러 컴포넌트의 상태를 공유하기 위한 라이브러리이다. Redux를 써보자 이를 사용하기 위해 우선 예시 컴포넌트를 하나 만들자 import { Table } from 'react-bootstrap' function...