📖 들어가며 이번 포스팅에서는 React에서 사용되는 상태관리 라이브러리에 대해서 각각의 특징과 개인적인 견해가 들어가 있습니다. 현재 포스팅에서 다룰 주요 네 가지 라이브러리입니다. react-redux & redux-toolkit recoil zustand jotai React에서 상태 관리 라이브러리와 함께 개발을 하다 보면 위에서 언급한 네 가지 라이브러리 중 하나쯤은 분명 알고 계시리라 생각합니다. 위 이미지는 최근 1년간 네 가지 라이브러리의 NPM 동향입니다. 현재 추세로 봤을 때 1위: redux (react-redux & redux-tookit) 2위: zustand 3위: jotai 4위: recoil 위 순위로 보입니다. 그럼 간단한 코드 예제와 함께 특징을 알아보겠습니다. Redux..

📖 들어가며 리액트가 뛰어난 성능을 보여줄 수 있는 비결 중 하나는 바로 가상 돔(Virtual DOM)입니다. 이는 리액트의 핵심 개념 중 하나로 가상 돔에 대해 알아보겠습니다. DOM(Document Object Model) 웹 사이트에 접속하면 보이는 각각의 요소(Element)들이 모여 하나의 문서(Document)를 구성합니다. 이러한 문서의 구조를 프로그래밍 언어가 이해할 수 있도록 표현한 것이 바로 DOM입니다. DOM은 요소들을 트리(Tree) 형태로 표현하며, 각 요소에 해당하는 노드(Node)가 존재합니다. 개발자들은 DOM이 제공하는 API를 이용해 이러한 DOM 구조에 접근하고, 내용이나 스타일을 변경할 수 있습니다. 이런 과정을 DOM 조작이라고 부릅니다. 하지만 예를 들어, 웹 ..

📖 들어가며 함수 컴포넌트 도입 리액트에서 함수 컴포넌트는 리액트가 처음 생겼을 때부터 있었지만, 처음에는 상태관리나 생명주기 메소드를 사용할 수 없어서 주로 단순한 표현을 위한 용도로 사용되었습니다. 하지만, 리액트 16.8 버전에서 Hooks가 도입되면서 함수 컴포넌트에서도 상태관리와 생명주기 메소드와 유사한 기능을 활용할 수 있게 되었습니다. Hooks의 도입은 함수 컴포넌트의 활용 범위를 크게 확장시키고, 현재는 함수 컴포넌트만으로도 대부분의 기능을 구현할 수 있게 되었고, 그 결과 함수 컴포넌트의 사용이 크게 늘었습니다. 실제로 리액트 공식문서에서도 클래스 컴포넌트보다 함수 컴포넌트로 작성하는 것을 권장하고 있습니다. 함수형(Functional)이 아니라 함수(Function) 컴포넌트라고 부르..

📖 들어가며 이전 글 React.memo 글에서 부모 컴포넌트에서 함수를 props로 받을 때 해결할 수 없는 문제를 해결할 수 있는 useCallback에 대해서 알아보겠습니다. useCallback이란 ❓ 먼저 React에서 useCallback은 리렌더링 사이에 함수 정의를 캐시 할 수 있게 해주는 React 훅입니다. 즉, useCallback 훅은 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅으로 React에 함수를 캐싱하고 매 실행마다 해당 함수를 재생성되는 상황을 막을 수 있습니다. 사용 방법 캐싱하려는 함수를 useCallback으로 래핑 하기만 하면 됩니다. // Button.js const Button = ({ onClick }) => { console.log('..

📖 들어가며 React에서 성능을 최적화하기 위해 사용할 수 있는 React.memo에 대해 소개하고, 기능을 어떤 상황에서 왜 사용하고 동작원리와 사용 예시 코드도 함께 알아보겠습니다. React.memo란 ❓ memo를 사용하면 해당 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다. 즉, 메모화된 버전의 컴포넌트로 해당 컴포넌트의 props가 변경될 때만 리렌더링을 할 수 있습니다. 커다란 큐모의 컴포넌트나 복잡한 상황에서 불필요한 리렌더링을 막아 성능을 최적화할 수 있습니다. 동작 원리 💡 React.memo는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규 값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전..

📖 들어가며 React에서 화면 (DOM)를 캡처, 저장하는 기능에 대해서 알아보려 합니다. 작은 토이 프로젝트를 하면서 여러가지 문제를 맞이 했었는데, 결과적으로 성공한 방법들로 포스팅하게 됩니다. 캡쳐(스크린샷)을 도와주는 라이브러리들 대표적으로 html2canvas, dom-to-image, html-to-image 등이 있습니다. 기능을 구현하면서 html2canvas와 dom-to-image를 모두 사용해 봤습니다. 제가 사용해 본 두 가지 라이브러리에 대해서는 일반적으로 두 라이브러리 모두 영역을 정확하게 캡처하고 DOM 요소에 적용된 CSS 스타일을 캡처하는 데 큰 문제는 없었습니다. 그러나 dom-to-image가 html2canvas보다 더 빠르고 안정적이라고 하는 사용자도 있다고 합니다..

📖 들어가며 최근 React Native + TypeScript 로 간단한 어플을 만들면서 공부하던 도중에 환경 변수 (env)를 적용이 필요했는데, 그냥 React에서 사용하던 방법과 조금 다른 것 같아서 생소했습니다. 1. react-native-dotenv react-native-dotenv는 React Native 환경에서 환경변수(env)를 적용할 수 있습니다. 터미널을 켜고 해당 명령어를 통해 라이브러리를 설치합니다. npm i react-native-dotenv 또는 yarn add react-native-dotenv 그리고 타입스크립트 환경에서는 추가로 types를 설치해 줘야 타입스크립트 환경에서 사용할 수 있습니다. npm install -D @types/react-native-dote..

📖 들어가며 최근 '클린 코드'책과 여러 개발 관련 영상이나 문서를 보고 테스트 코드의 중요성을 깨닫게 되었다. 앞으로 개발을 하면서 테스트 코드를 작성하기 위해서 테스트 코드를 먼저 작성하고 테스트 코드를 통과하기 위한 코드를 작성하는 TDD 개발 방식으로 React에서 Jest와 React testing library로 테스트 코드를 작성하는 법을 공부하게 되었다. 공부한 내용을 복습하고 정리하기 위해 글을 작성해 본다. 해당 글에서는 버튼을 클릭하면 숫자가 증감되는 간단한 앱을 TDD 개발 방식으로 테스트하고 만들어 볼 것이다. Jest와 React testing library Jest ? Jest는 개발자가 자바스크립트와 타입스크립트 코드에 대한 테스트를 실행할 수 있도록 하는 자바스크립트 테스트..

📖 들어가며 React + Typescript 환경에서 React Testing library와 jest를 이용해서 테스트 코드 작성에 대해서 공부하려는 도중에 오류가 발생했고, 결과적으로 해결하기 위해 해야 할 것은 별 거 아니었지만 힘들게(?) 해결 방안을 찾아서 기록을 해두려고 한다. 1. 문제 발생 CRA typescript로 패키지들을 설치하고 난 후에 npm test 명령어를 통해서 기본적으로 작성되어 있는 테스트 코드들이 잘 실행이 되는지 확인을 해봤다. 하지만 ReactDOM.render is no longer supported in React 18 오류가 발생했다. 테스트 코드 자체는 PASS가 되면서 잘 실행이 되었지만 위와 같은 오류 메시지가 매우 신경 쓰였다. 2. 발생 원인 Rea..