Advanced/React
[React] sagen을 사용해서 간단히 상태 관리하기
[React] sagen을 사용해서 간단히 상태 관리하기
2021.05.16React에서 전역 상태를 관리하기 위해서 Redux를 많이 사용합니다. 하지만, Redux의 사용법이 간단하지 않아서 대체하기 위한 라이브러리가 많이 나오고 있습니다. 이 게시글에서는 간단하고 사용하기 쉬운 sagen에 대해 알아보겠습니다. sagen은 무엇인가? 먼저, sagen은 전역 상태 관리를 하기 위한 최선의 도구는 아닙니다. 아직 개발자 도구도 없으며, 개발이 지속적으로 이루어지고 있는 라이브러리입니다. sagen에 대해 간단히 알아보기 전, sagen은 다른 라이브러리와 어떻게 다른지 알아보겠습니다. 현재 sagen@2.2.0의 MINIFIED + GZIPPED 사이즈는 1.1KB로, Redux@4.1.0(1.6KB)보다 가볍습니다. sagen 시작하기 sagen을 이용해 상태 변경을 위한..
[React] useEffect의 동작 원리
[React] useEffect의 동작 원리
2021.01.31useEffect Hook은 dependency 배열 내에 지정된 값의 변화가 일어났을 때 이펙트 함수가 실행됩니다. 이러한 특성으로 인해 컴포넌트가 마운트될 때 API를 통해 데이터를 가져오거나, state 값 또는 props 값이 변경될 때 특정 함수를 실행시키는 등의 작업을 하는 데 사용됩니다. 함수 컴포넌트에서 return 구문 밖에서의 함수 실행은 거의 모두 useEffect 내에 작성됩니다. 또한, 컴포넌트는 하나 이상의 useEffect Hook을 가질 수 있습니다. 이 게시글에서는 useEffect가 어떻게 동작하는지에 대해서 알아보도록 하겠습니다. TLDR useEffect로 componentDidMount 흉내내기 useEffect로 componentDidMount를 흉내내기 위한 방법..
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를 이용해..