분류 전체보기 (90) 썸네일형 리스트형 [staleTime] vs [cacheTime] React Query의 라이프 사이클 A 쿼리 인스턴스가 mount 됨 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱함 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됨 A 쿼리 인스턴스가 unmount 됨 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집됨 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여줌 staleTime 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간 fresh 상태일때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않는다. 데이터가 한번 f.. 리액트 성능최적화 8가지 방법 1. state 선언은 어디서 하는 게 좋을까요? 리액트는 특정 state가 변경되면 그 state가 선언된 컴포넌트와 그 하위 컴포넌트들을 모두 리렌더링 시킵니다. 따라서 state가 선언되는 위치를 잘 설계하는 것은 리렌더링 횟수에 엄청난 영향을 끼칩니다. 기본적으로 state의 선언위치는 이렇습니다. 해당 state를 사용하는 컴포넌트들을 잘 구분해놓은 뒤 그 컴포넌트들 중 가장 최상위 컴포넌트에 선언합니다. 만약 그 state를 사용하는 최상위 컴포넌트보다 더 상위 컴포넌트에 state를 선언하면 state를 사용하지 않는 더 많은 컴포넌트들이 state변경에 의해 불필요한 리렌더링을 겪게 됩니다. 예를 들어 다음과 같은 컴포넌트 구조가 있다고 합시다. Index ㄴGroup ㄴUserList ㄴ.. 불변성 유지하며 데이터수정 리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있다. 함수형 프로그램밍의 특징 중 하나가 순수함수를 사용하는 것인데, 여기서 순수함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수이다. 동시에 순수함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻한다. 여기서 외부의 값을 변경하지 않는다는 부분이 불변성과 깊은 연관을 가진다. 불변성 이해하기 원시타입 let string = 'data1' string = 'data2' 위의 코드는 string변수에 'data1'값에서 'data2'값으로 변경시켰는데, 이것은 위에서 말한 불변성을 어긴것처럼 보이지만, 실상은 그렇지 않다. let string = 'data1' // 1... Mock Service Worker MSW(Mock Service Worker의 약자, API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답(Mocked response)을 보내주는 역할을 합니다. 백 엔드에서 데이터를 가져오는 부분을 테스트하기 위해서는 실제로 서 버에 호출하는 end-to-end 테스트를 할 수 있지만 여기서는 서버에 요청 을 보낼 때 그 요청을 가로채서 Mock Service Woker라는 것으로 요청을 처리하고 모의 응답(mocked response)을 보내줍니다 MSW 작동 방식 브라우저에 서비스 워커를 등록하여 외부로 나가는 네트워크 리퀘스트를 감지합니다. 그리고 그 요청을 실제 서버로 갈 때 중간에 가로채서 (intercept) MSW 클라이언트 사이드 라이브러리로 보냅니다. 그 후 .. react-testing-library query 함수 다양한 쿼리 render 함수를 실행하고 나면 그 결과물 안에는 다양한 쿼리 함수들이 있는데요, 이 쿼리 함수들은 react-testing-library 의 기반인 dom-testing-library 에서 지원하는 함수들입니다. 이 쿼리 함수들은 Variant 와 Queries 의 조합으로 네이밍이 이루어져있는데요, 우선 Varient 에는 어떤 종류들이 있는지 봅시다. Variant getBy getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다. getAllBy getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 여러개를 선택합니다. 만약에 하나도 없으면 에러가 발생합니다. queryBy queryBy* 로 시작하는 쿼리.. react에서 react-testing-library , jest를 사용해 TDD react-testing-libraryr에서는 Enzyme 과 달리 모든 테스트를 DOM 위주로 진행합니다. 그리고, 컴포넌트의 props 나 state 를 조회하는 일은 없습니다. 컴포넌트를 리팩토링하게 될 때에는, 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않습니다. react-testing-library는 이 점을 중요시 여겨서, 컴포넌트의 기능이 똑같이 작동한다면 컴포넌트의 내부 구현 방식이 많이 바뀌어도 테스트가 실패하지 않도록 설계되었습니다. 추가적으로, Enzyme 은 엄청나게 다양한 기능을 제공하는 반면, react-testing-library 에는 정말 필요한 기능들만 지원을 해줘서 매우 가볍고, 개발자들이 일관성 있고 좋은 관습을 따르는 테스트 코드.. babel 기본설정 크로스 브라우징 크로스 브라우징은 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 말한다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 한다. 바벨이란 바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 합니다. 바벨의 기본 동작 바벨은 ECMAScript2015 이상의 코드를 하위 버전으로 바꾸는 것이 주된 역할이다. 이렇게 바뀐 코드는 인터넷 익스프로러나 구버.. immer[Redux] immer는 currentState의 프록시객체인 임시 draftState를 생성하여 수정, nextState를 생성하게 된다. 불변성을 유지하기위해 기존 reducer에서는 전개연산자 ,concat,filter,map같은 함수를 이용했지만 가독성이 떨어지면 직관적이지 않다는 단점이 있다 immer를 활용하면 이부분을 해소할수 있다 설치 npm i immer produce(currentState, producer: (draftState) => void): nextState currentState : 현재 state draftState : 현재 state의 프록시객체(복사판같은) nextState : producer 함수가 반환하는 값 사용예시 immer이용한 reducer const { produce }.. 이전 1 2 3 4 ··· 12 다음
