React

React 18 의 새 기능 자동 배칭(Automatic Batching)은 무엇일까?

React 18 릴리즈를 살펴보며 Automatic Batching에 대해 탐구해보고 실험한 것을 정리한 글입니다. Batching이란 무엇일까? React 공식문서 번역 ( https://reactjs.org/blog/2022/03/29/react-v18.html ) Batching이란 React가 더 나은 성능을 위해 여러개의 state 업데이트를 한 번의 리렌더링으로 묶어서 진행하는 것을 말한다. Automatic batching이 없다면 React의 이벤트 핸들러 내부에서만 batched 업데이트가 가능했다. 기존에는 Promise의 내부나 setTimeout 혹은 native 이벤트 핸들러에서는 React에 의해 배칭 되지 않았다. Batching은 어떤 이점을 주는가? 당연히 성능적인 이점이다..

React에서 Intersection Observer로 이미지 Lazyloading 구현하기 with 콜백 ref

이슈 COEAT 이라는 서비스를 개발하고 있었다. 약 50개의 이미지를 한 번에 불러오는 페이지가 있는데 이 부분에서 문제가 발생했다. 이미지의 크기가 너무 크다 보니까 50개의 이미지를 한 번에 요청하니 페이지가 멈춰버리는 것이었다. 이를 해결하기위해 서버 측에서 Image Resizing을 진행하기로 했고 클라 측에서는 Lazy loading을 추가하기로 했다. 사실 이미지의 리사이징만 완료되어도 성능이 대폭 개선될 것이다. 하지만 추후에 불러와야할 이미지들의 개수가 늘어가게 되었을 때에는 리사이징만으로는 한계가 있을 것이라고 판단했다. 이에 이전에 한 번 살펴보았던 Intersection Observer API를 사용해서 유저가 특정 위치에 도달했을 때 이미지를 로딩할 수 있도록 구현해보았다. In..

리액트에서 이미지 미리보기 만들어보기 (React Image Preview)

서론 HTML의 input 태그로 이미지를 핸들링할 때 현재 선택한 이미지를 미리 보고 싶은 경우가 있다. 라이브러리를 통해 구현할 수도 있지만 어떤 방식으로 구현할 수 있을까 고민해보았다. Web API 중 FileReader라는 객체를 사용하여 구현해보도록 하겠다. React에서 ImagePreview 만들기 마크업은 위와 같다. 동작원리는 다음과 같이 설계했다. input 이미지가 변경될 때 onChange 함수 내부에서 파일을 체크한다. 위의 File 객체를 기반으로 이미지를 base64로 인코딩한다. 인코딩된 문자열을 imageSrc state에 넣음으로 렌더링 하여 프리뷰를 보여준다. 즉, input에서 사용자가 입력한 File 객체를 base64로 인코딩할 필요가 있다. 이를 위해서 File..

리액트 절대경로 설정 및 모듈/경로 별명 짓기 with CRA (absolute path, path alias)

왜 절대경로를 사용할까? 위와 같은 디렉토리 구조를 갖는 프로젝트가 있다고 해보자. entry.js에서 target.js 을 import 해야 할 경우에 우리는 어떻게 경로를 작성해야 할까? 아마 다음과 같이 작성할 것이다. import target from '../../../target'; 상대 경로로 target.js를 찾다 보니 import 하는 path의 경로가 장황해졌다. 지금과 같이 간단한 예시에서는 별 문제가 아니라고 생각할 수도 있겠다. 하지만 프로젝트의 규모가 점점 커지고 디렉토리의 복잡도가 커질수록 import 의 경로를 찾는 게 점점 힘들어질 것이다. 심할 경우에는 다음과 같아질지도 모른다. import target from '../../SomeThing/../../SomePath/...

[React.js] Error Boundary와 Fallback UI 에 대하여

서론 리액트에서는 예외 발생 시 예외를 발생한 컴포넌트만 언마운트 되지 않는다. 예외 발생 시 모든 컴포넌트가 언마운트 된다. 이는 잘못된 정보를 사용자에게 보여 주는 것보다는 아무것도 보여주지 않는 것이 낫기 때문이다. 하지만, 아무것도 보여주지 않는 것은 잘못된 정보를 제공하지 않았을 뿐이지 나쁜 사용자 경험을 제공하게 된다. 이러한 문제점을 해결하기 위해 등장한 것이 Error Boundary 이다. Error Boundary는 하위 컴포넌트에서 발생한 예외를 catch(try-catch 와는 다름)하여 Fallback UI를 보여주는 등의 처리를 해주는 컴포넌트이다. 웹 페이지를 이용하다가 갑자기 흰 화면만 덩그러니 나오는 것보다는 현재 상태가 어떤 지 표시해주는 게 훨씬 좋은 사용자 경험을 제공..

[React.js] useEffect, cleanUp, deps, unMount에 대하여

useEffect의 클린업 함수 실행 시점과 deps 배열 (= 의존성 배열) 이 미치는 영향에 대해 알아보자. 클린업, cleanUp 하나의 상황을 가정해보겠다. 클릭할 때마다 카운트가 올라가는 Count라는 컴포넌트가 있다. 컴포넌트가 언마운트 되었을 때 해당 컴포넌트가 갖고 있는 state인 count의 값을 로깅하고 싶다. 어떻게 구현하겠는가? 가장 먼저 떠올릴 수 있는 방법이 useEffect의 cleanup을 이용하는 것이다. 언마운트 될 때만 실행하면 되니까 deps 에는 빈 배열을 주면 될 것 같다. 자, 카운트를 증가시키고 언마운트 시킨 뒤 로그를 확인해보자. 예상대로 동작하지 않는다. 왜 그럴까? useEffect의 deps가 빈 배열일 경우 effect 내부의 props, state ..

[React.js] 고차 컴포넌트 HoC 에 대하여

이 포스트는 '실전 리액트 프로그래밍' 을 참고하여 작성되었습니다. 나는 코드를 작성할 때, 중복인 코드가 너무 싫다. 개발 과정에서 별 생각 없이 코드를 치다보면 어느새 중복된 코드밭이 되어었다. 그래서 항상 코드를 짜고 다시 그 중복을 제거하고자 코드를 리팩토링하는 어떻게보면 바보같은 짓을 반복하며 코딩했다. 사실 코드를 작성하는 개발자의 기본은 중복을 피하는 것이라고 생각한다. 리액트에서는 render 내에서 코드가 많이 작성된다. 중복되는(공통으로 사용되는) 여러 요소들은 컴포넌트화해서 사용하고, 중복되는 로직들은 함수로 빼서 사용한다. 그렇다면 중복으로 사용되는 컴포넌트의 로직은 어떻게 관리할까? 고차 컴포넌트 난 웹 지식이 거의 전무한 상태로 이미 꽤 진행된 프로젝트에 참여하게 되어 그 때 리..