유연해지기/React.js

간단하게 React 리렌더링 최적화하기

무거운 컴포넌트 만들기 무거운 작업을 하는 컴포넌트를 흉내내기 위해서 다음과 같은 컴포넌트를 정의해보자. function Child() { let start = new Date().getTime(); for (; new Date().getTime() - start c + 1)}>자식 상태 변경 자식상태: {count} ); } 버튼을 누를 때마다 Compo..

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..

간단한 리액트 커스텀 훅 만들어보기. (React custom hook)

서론 React 16.8부터 추가된 Hook 은 리액트 함수형 프로그래밍의 근간이 된다. 다만 Hook은 리액트 어디서나 사용 가능한 것은 아니고 몇 가지 제약사항이 있다. 리액트 함수형 컴포넌트 내부 혹은 커스텀 훅 내부에서만 사용 가능하다. 함수형 컴포넌트 내부에서도 최상위에서 선언이 가능하다. (반복문, 조건문에서 선언 X) 오늘은 이 Custom Hook, 커스텀 훅 에 대해서 다루어보자. 커스텀 훅이란? 컴포넌트 내부에서 훅을 사용해 로직을 구현하다 보면 중복되는 부분이 발생하기 마련이다. 우리는 중복되는 훅들을 결합하고 추상화하여 사용하고자 하는 니즈가 생길 것이다. 이와 관련해 리액트 공식문서에서는 커스텀 훅에 대해 다음과 같이 말하고 있다. Hook을 추상화된 로직으로 사용할 수 있도록 결..

리액트 절대경로 설정 및 모듈/경로 별명 짓기 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] useRef와 useState의 용도와 차이

서론 리액트에서 ref와 state의 차이점은 무엇인가? 면접에서 위와 같은 질문을 받았다. 나는 ref 를 특정 DOM 엘리먼트를 가리키는 용도로만 사용해왔기에 이 질문의 의도를 파악하지 못했다. 본질적으로 사용용도가 다른데 어떤 차이점을 물어보는거지? 라고 생각했다. 면접이 끝난 뒤 계속 기억에 남아 이에 대해 찾아보았고 깨달은 바를 정리해보고자 한다. useRef useRef 는 단순 DOM 엘리먼트를 지정하는데만 사용되지 않는다. useRef 를 통해 클래스의 멤버 변수와 비슷한 역할을 하게 만들 수 있다. state 와 달리 값의 변화에 의한 리렌더링이 발생하지 않는다. current 라는 속성을 통해 어느 값이든 보유할 수 있는 일종의 컨테이너 역할을 할 수 있다. 함수형 컴포넌트는 인스턴스로..

[React.js] crypto-js를 이용한 패스워드 암호화

서론 진행 중인 프로젝트에서 간단한 익명 로그인을 구현하게 되었다. 게시글 작성 시 아이디와 패스워드를 입력받은 뒤 해당 게시물의 수정이나 삭제 요청에는 아이디 패스워드를 확인하는 구조이다. 처음에는 firebase의 실시간 데이터베이스를 사용해 게시물의 정보와 아이디, 패스워드 값을 그대로 저장했다. 하지만 유저가 입력한 정보를 데이터베이스에 전송하는 과정에서 아이디와 패스워드가 그대로 드러나기 때문에 절대 이렇게 구현을 마쳐서는 안 된다. 그저 패킷을 열어보기만 해도 유저의 정보가 유출되기 때문에... 아무리 간단한 익명 로그인이어도 '챙길 건 챙기자! '라는 마인드로 패스워드의 암호화를 진행하게 되었다. 암호화 crypto-js 패키지를 사용했고 그중 PBKDF2 알고리즘을 선택했다. PBKDF2는..