하리하링웹

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 2.부모 컴포넌트가 re-render되었을 때 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. 간단하게 예시 코드를 보자 import { useState } from 'react'; function BigComponent() { console.log('revaluating'); return complex calculations ; } e..

React에서 크게 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 Rerender되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이 글에선 1.함수 내의 State가 변경되었을 때 의 경우 re-rendering을 방지하는 디자인 패턴에 대해 설명할 예정이다. 먼저 React의 re-render 과정을 간단하게 나누어 설명을 해보자면 re-evaluation 과정을 거친다. virtual dom을 생성한다. 비교 후 Commit하여 페이지에 반영한다 정도로 나누어져 있다. 자세하게 설명하면 뭐 함수를 호출..

위 사진에서 UI를 담당하는 Notification Component가 아니라 이를 구현하기 위한 Provider를 만들 예정이다. 필요한 기능들은 아래와 같다. 1. 토스트기능 2. Auto dismiss on/off 기능 3. dismiss ms 설정 기능 4. success,alert,info 3가지 종류 라이브러리는 안쓸 수 있으면 최대한 안쓰기로 마음먹었기에 별다른 토스트 라이브러리를 사용하지 않고 직접 구현하였다. 먼저 기본적으로 필요한 Type들을 정의해준다. 자동으로 Notification가 닫히는 시간을 5초로 정의하였으며 Auto Dismiss유무는 True로 정의하였다. 이 값은 사용자가 Option값을 넣지 않았을때의 기본값이다. 이후 Notification을 Provide하기 위한..

useSWR이 좋은 라이브러리라고는 이미 널리 알려져 있음에도 불구하고 useSWR에 관련된 대부분의 글들에서 좀 더 다양하게 응용하여 사용하는 방법에 대해 다루는 경우는 많이 보지못했기에 가볍게 useSWR의 좀 더 섹시한 사용방법중 한가지를 공유하고자 글을 작성하게 되었다. 먼저 공식문서의 useSWR의 간단한 사용 방법은 다음과 같이 되어있다. 또한 많은 사람들이 아마? useSWR을 이러한 방법으로 사용하고 있을 것이다. 물론 이러한 방법으로 사용하는것이 나쁜것은 절대 아니다. 하지만 이런 방식으로 사용을 할 때에 간과하는 부분이 있을수도 있을 것 같다. 가장 핵심적인 이유는 바로 저 첫번째 인자가 단순하게 api path를 적는것이 아닌 key라는 것이다. useSWR은 저 key를 기반으로 f..

React.memo는 특정한 몇 가지의 경우를 제외하고는 실제로 사용할 일이 많이 없기에 React.memo는 생소하다고 느끼는 사람들이 많을 것 같다. 또한 React.memo는 사용하더라도 성능상의 큰 이득을 가져오지 못할수도 있으며 잘못 사용할경우 찾기 힘든 버그를 발생시키거나 오히려 페이지의 성능이 저하되는 경우도 있을수도 있기에 사용할 때 주의해서 사용해야하는 함수이다. React.memo는 Component를 memo라는 함수로 감싸는것으로 사용할 수 있으며 memo로 감싸져있는 Component를 render할때에 render 이전에 현재 render되어 있는 component의 Props와 다음에 render될 Props를 비교하는 연산을 한 번 거친다. 이후 두 개의 Props가 모두 일..

useSWR에는 크게 3가지의 hook들이 있다. useSWR useSWRInfinite useSWRImmutable(1.@ 버전부터 제공) useSWR은 Next.JS에서 csr로 페이지를 만들고자 할 때 없어서는 안될 hook이라고도 말할 수 있을 정도로 사용했을 때 얻는 퍼포먼스, 편의성이 엄청나게 크다. 먼저 useSWR은 유저가 페이지에 머물거나 다른 페이지에 있다가 페이지로 다시 돌아왔을때, 네트워크가 끊겼다가 다시 복구가 되었을 때 설정해놓은 key값으로 get요청을 보내 데이터를 다시 revalidate한다는 점이 핵심적인 feature라고 말할 수 있다. 이 때 data 값을 useSWR이 알아서 캐싱하게 되고 만약 새로 불러온 값이 기존에 캐싱된 값과 같다면 따로 component를 r..

TailwindCSS 3.0이 얼마전에 Release되었는데 3.0에서 새로 추가된 기능들을 소개합니다. -JIT(Just-in-time) 기존에는 따로 Mode설정을 해야 사용할 수 있었던 JIT가 이제는 따로 설정하지 않아도 all time사용할 수 있게 되었습니다. -기본 Color Pallete 종류 추가 아래의 Pallete가 2.@ 버전이고 위가 3.@버전입니다. 위의 Pallete외에도 2가지의 Gray theme Pallete가 추가되었습니다. -box-shadow에서 color 선택 가능 기존에는 Shadow 색을 변경하는 명령어가 없었지만 이제는 shadow-blue-500/50와 같이 색을 지정할 수 있습니다. -scroll-snap api가 추가되었습니다. Keen-slider라이브..

Tailwind CSS는 부트스트랩과 비슷한 역할을 한다고 말할수도 있지만 좀 자세히 알아보면 부트스트랩의 상위호환격이라도도 말할 수 있는 프레임워크이다. 그동안 tailwind외에도 styled component, sass를 다 써보았지만 왜 최종적으로 tailwind를 사용하게 되었는지에 대해 이 글에서 소개하려 한다. tailwind의 가장 큰 장점은 사용이 편리하다는 점이다. 예를들어 16px의 padding을 주고 싶을 때 기존에는 클래스를 선언한 뒤 해당 클래스명을 불러와서 사용하는식으로 css를 사용했다면 tailwind는 class부분에 p-4와 같이 입력하면 tailwind프레임워크가 이를 확인하고 해당 부분에 알아서 16px의 padding을 적용시켜준다. tailwind를 처음 사용하..