리액트
sagen - 상태 관리 라이브러리
sagen - 상태 관리 라이브러리
2021.02.10sagen npm sagen Management global state with out provider www.npmjs.com 규모가 큰 앱을 개발할 때 props drilling을 피하기 위한 목적으로, 상태가 변경하는 것을 직접 모니터링하기 위한 목적으로 또는 그 외의 이유로 상태 관리 라이브러리를 사용하곤 합니다. 또한, 상태 관리 라이브러리를 사용하지 않고 ContextAPI를 사용하는 경우도 있습니다(이 경우, ContextAPI는 타 상태 관리 라이브러리와 달리 렌더링 최적화가 이루어지지 않음을 인지하고 설계되어야 합니다). 위와 같이 이미 많은 상태 관리 라이브러리가 존재하며, 새로운 라이브러리가 종종 등장합니다. 본 글에서는 상태 관리 라이브러리 중 하나인 sagen에 대해서 알아보도록 ..
[React] useEffect의 동작 원리
[React] useEffect의 동작 원리
2021.01.31useEffect Hook은 dependency 배열 내에 지정된 값의 변화가 일어났을 때 이펙트 함수가 실행됩니다. 이러한 특성으로 인해 컴포넌트가 마운트될 때 API를 통해 데이터를 가져오거나, state 값 또는 props 값이 변경될 때 특정 함수를 실행시키는 등의 작업을 하는 데 사용됩니다. 함수 컴포넌트에서 return 구문 밖에서의 함수 실행은 거의 모두 useEffect 내에 작성됩니다. 또한, 컴포넌트는 하나 이상의 useEffect Hook을 가질 수 있습니다. 이 게시글에서는 useEffect가 어떻게 동작하는지에 대해서 알아보도록 하겠습니다. TLDR useEffect로 componentDidMount 흉내내기 useEffect로 componentDidMount를 흉내내기 위한 방법..
[JavaScript] Virtual DOM 만들기
[JavaScript] Virtual DOM 만들기
2021.01.26React 공식 홈페이지에서는 Virtual DOM을 'UI로 표현될 객체를 가상 메모리에 저장하여 라이브러리에 의해 실제 DOM으로 동기화 하는 개념'으로 표현하고 있습니다. 여기서 UI로 표현될 객체는 DOM을 의미하며, 라이브러리는 VirtualDOM을 렌더링해주는 라이브러리를 의미합니다. TLDR 리액트는 두 가지 전략을 사용해 diff 알고리즘을 기존의 O(n^3)에서 O(n)으로 성능 개선을 하였습니다. 리액트에서 사용하는 Virtual DOM을 바닐라 자바스크립트로 충분히 구현 가능하다는 것을 알 수 있습니다(본 게시글의 Virtual DOM 코드는 리액트의 Virtual DOM diff 알고리즘과 많이 다릅니다). 리액트를 사용할 때 데이터의 변화에 따른 화면 변화의 흐름을 이해한다면 Vi..
[React] 전역 상태 관리 라이브러리 'sagen'을 만들면서
[React] 전역 상태 관리 라이브러리 'sagen'을 만들면서
2020.12.13[React] 전역 상태관리 라이브러리 'sagen'을 만들면서 이번에 전역 상태관리 라이브러리 sagen를 작업 후 배포하였습니다. 왜 만들었는가? 처음 리액트를 공부했을 시절 MobX가 유명하지 않았을 때라서 전역 상태를 관리하기 위한 방법으로 redux를 사용해야 했었습니다. 리액트의 내용도 겨우 이해하면서 프로젝트 개발을 진행하고 있었는데, redux의 내용을 이해하는 것은 너무 힘들었습니다. props drilling 등과 같은 문제를 해결하기 위한 방법으로 전역 상태 관리 라이브러리를 사용하는 것이므로 프로젝트의 규모가 커지고 관리해야 할 데이터가 많다면 전역 상태 관리가 필요하다는 것을 인지는 하겠으나, 좀 쉽게 관리할 수는 없을까?? 하는 생각을 늘 하고 있었습니다. ContextAPI r..
[React] 전역 상태 관리 라이브러리 제작기 (3)
[React] 전역 상태 관리 라이브러리 제작기 (3)
2020.12.02[React] 전역 상태 관리 라이브러리 제작기 (3) [React] 전역 상태 관리 라이브러리 제작기 (1) [React] 전역 상태 관리 라이브러리 제작기 (2) 위 포스트에서 작업한 전역 상태 관리 라이브러리에 useReducer와 같이 reducer 함수를 전달받아서 dispatch action으로 상태를 관리하는 구조를 추가하도록 하겠습니다. Redux의 상태관리 Redux는 아래와 같이 작성해서 상태 관리를 할 수 있습니다. import { createStore } from 'redux' function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/incremented': return { ..
[React] 전역 상태 관리 라이브러리 제작기 (2)
[React] 전역 상태 관리 라이브러리 제작기 (2)
2020.12.01[React] 전역 상태 관리 라이브러리 제작기 (2) 이전 글 보기 [React] 전역 상태 관리 라이브러리 제작기 (1) 개선되어야 하는 부분 이전 작업의 내용만 갖고도 전역 상태 관리를 할 수 있습니다. 하지만, 복잡한 데이터를 다루는 것에 용이하지는 않습니다. 그 이유는 Context API와 같이 객체 또는 배열 데이터를 저장한다면 === 연산자로 비교할 수 없어 데이터가 변경되지 않았음에도 리렌더링이 발생하기 때문입니다. 이 이유는 제가 Context API를 사용하지 않고 전역 상태 관리 라이브러리를 만들기로 결심한 이유가 되기도 합니다. 또한, useState의 setState를 사용하면 함수를 넘길 수 있는데, 함수의 첫 번째 인자로 현재 값을 받아올 수 있습니다. 이를 이용해 Hook의..
[React] 전역 상태 관리 라이브러리 제작기 (1)
[React] 전역 상태 관리 라이브러리 제작기 (1)
2020.11.29전역 상태 관리 라이브러리 제작기 (1) 이전부터 '전역 상태 관리 라이브러리를 만들어보고 싶다'라는 생각을 갖고 있었습니다. 최근 Context API와 Redux의 구조가 어떻게 이뤄져 있는지에 대해 알아본 뒤 전역 상태를 관리하는 흐름에 대해 대충 알게 되어서 이를 활용해 라이브러리를 제작해보려 합니다. 라이브러리 설계 Context API를 사용하지 않고 상태 관리를 하도록 작성할 예정입니다. 또한 store가 생성될 때 store에서 데이터를 갖고 있도록 하여 Provider 없이 사용 가능하도록 하려 합니다. Provider가 없는 상태 관리에 대해서는 zustand 상태 관리 라이브러리를 보고 아이디어를 얻었습니다. 필요한 요소 상태 관리 라이브러리를 만든다고 할 때, 제대로 동작하기 위해서..
create-react-app을 사용하여 chrome extension 만들기
create-react-app을 사용하여 chrome extension 만들기
2020.11.15create-react-app을 사용하여 chrome extension 만들기 create-react-app(CRA)는 React 앱을 손쉽게 빌드 및 배포할 수 있는 환경을 제공합니다. 최근 Chrome 확장 프로그램 세팅을 진행하면서 CRA를 사용해 손쉽게 확장 프로그램을 제작하고 싶었지만, CRA는 기본적으로 SPA 만을 지원하여 추가적인 설정이 필요했습니다. 만들려 하는 크롬 익스텐션에서 팝업 환경과 옵션 페이지가 모두 필요하여 빌드 엔트리를 나눌 필요가 있었으나, options_page에 관련된 정보를 찾을 수 없었어서 직접 작업하면서 겪은 과정을 정리합니다. React App 만들기 우선, create-react-app을 사용하여 React 앱을 만들어 줍니다. 타입스크립트를 사용하기 위해 -..
React Redux에서 ContextAPI performance issue를 해결한 방법
React Redux에서 ContextAPI performance issue를 해결한 방법
2020.11.07React Redux에서 ContextAPI performance issue를 해결한 방법 React의 ContextAPI는 퍼포먼스 이슈가 있어 복잡한 데이터를 다루기에 적합하지 않습니다. 퍼포먼스 이슈? 이 퍼포먼스 이슈를 간단히 요약하면 객체 {number: 0, text: "text"}를 contextAPI에서 관리할 때 A Comp에서는 context의 number 값만을, B Comp에서는 context의 text 값만을 사용한다고 가정하겠습니다. context의 number 값이 변경되면 A Comp만 리렌더링되는 것이 가장 이상적이겠지만, number 값을 사용하지 않는 B Comp 역시 리렌더링됩니다. 해결 방법..? 해결 방법으로는 위 링크에서 언급한 방법과 같이 context 분할, ..
useEffect Dependency
useEffect Dependency
2020.10.21[React] useEffect Dependency 친구와 팀 프로젝트를 진행하던 중, Hook의 Dependency 배열에 대해 질문을 받아서 논의가 이루어져 이 내용을 정리합니다. 문제가 된 코드 - tokenRefreshCallback의 dependency const useTokenRefresher = (callback: (refresh: string) => void) => { React.useEffect(() => { try { const refreshCookie = Cookies.get('refresh'); if (!refreshCookie) { throw 'RefreshToken does not exist.'; } callback && callback(refreshCookie); } catch..
ContextAPI 렌더링 이슈
ContextAPI 렌더링 이슈
2020.10.17[React] ContextAPI 렌더링 이슈 ContextAPI는 규모가 작은 앱을 개발할 때 매우 편리합니다. 하지만, Context 값이 변경될 때, useContext가 렌더링을 유도하기 때문에 앱의 규모가 커진다면 일부 성능 문제가 발생할 수 있습니다. '아니 어떻게 React에서 제공하는 기본 기능에서 문제가 발생할 수 있냐??'라고 생각할 수도 있습니다. 지금부터 어떤 문제가 발생하는지와 함께 해당 문제를 해결하는 방법에 대해 알아봅시다. ContextAPI 앱 구성 및 문제 확인 문제를 확인할 수 있는 CodeSnadbox 간단한 객체 값을 갖고 있는 Context 구성입니다. useReducer를 이용해 Provider에 값을 전달하고 있으며, useContextr를 이용해..