react

타입스크립트에서 기존 코드로부터 타입을 가져오는 법 ReturnType, ComponentProps

타입스크립트를 잘 사용하기 위한 여러 유틸 타입이 있다. 그중에서도 이미 잘 사용중이던 함수를 사용한다면, ReturnType을 통해서 해당 함수의 반환값 타입을 쉽게 얻을 수 있다. ReturnType function getUser() { return { name: "Alice", age: 30, };} 이런 함수가 있을 때, 이 함수의 리턴값 타입을 재사용하고자 하는 경우를 생각해보자.interface getUserReturnValue { name: string; age: number;} 이렇게 타입을 직접 작성할 수도 있지만, 만약 getUser 함수의 리턴값이 바뀌는 작업이 일어나면 타입도 직접 바꿔줘야 한다.그리고 사람이 작성하는 코드이기에, 실수가 일어나기 더 쉬워보인다. 때..

자바스크립트 Proxy 객체를 사용해서 State 만들어 보자

React를 사용하면 useState를 통해서 데이터를 바꿔서 DOM을 다시 그리는 기능을 사용할 수 있다. 생각해보면, 순수 자바스크립트로 화면을 바꾸고자 한다면 DOM에서 element를 찾은 뒤에 데이터를 직접 수정해줘야 하는 부분이다. 그래서 어떻게 React는 이런 반응성, Reactivity를 구현했을까 고민해보고 자바스립트의 Proxy 객체를 사용해서 State를 비슷하게 구현해보자 하였다. 🙌 직접 구현한 예제 최대한 React와 비슷하게 구현해보려고 노력했다. 다음은 구현한 코드 내용인데, 일단 HTML이다.  root에 element가 삽입되는 것으로 생각했고, 하나의 js를 통해서 이를 통제할 수 있도록 구현해봤다. Proxy를 사용해서 구현했는데, Proxy..

React Context API 잘 사용하기 (re-render 방지법 - selector & atom)

React의 Context API를 사용하면, Provider 하위의 어떤 컴포넌트에서나 함께 공유하는 데이터를 사용할 수 있는 장점이 있다.👻 그러나 Context API를 사용할 때 발생할 수 있는 문제 중 하나는 빈번한 리렌더링이다.이 re-render 문제 때문에 Context API는 종종 사용되는 것이 꺼려지는데, 어떻게 하면 이를 최적화하여 잘 사용할 수 있을지 알아보았다. 내가 알아본 방법은 두 가지로, selector와 atom을 사용하는 두 가지 방법이다.타입스크립트로 작성한 예제와 함께 어떻게 하면 re-render 문제를 해결하여 Context API를 사용할 수 있을지 확인해보았다. Context API의 리렌더링 문제Context API를 사용하면 Provider로 데이터를 전..

React JSX의 List Rendering에서 key값 설정하기 (.map)

React에서 구조화된 객체를 여럿 가지는 배열을 통해서 List를 그리는 전형적인 패턴이 있다. const data = [{ title: "hi", content: "hello" }, ... { title: "bye", content: "sad" }] 해당 데이터를 React는 다음과 같이 그린다. function App() { return ( {data.map(el => ( {el.title} {el.content} ))} ) } React에 익숙하다면, 위의 코드에서 경고 메세지를 예상할 수 있을 것이다. 바로, key prop을 설정하라는 메세지이다. Warning: Each child in a list should have a unique “key” prop. 이 경고를 없애기 위해서 주로 사용..

React 개발자가 공부해본 SwiftUI

이 글은 React에 익숙한 제가 SwiftUI를 보고 React와 유사한점, 다른점에 대해서 기록하고자 시작하였습니다. 🍊 apple developer 공식문서와 SwiftUI 튜토리얼을 참고했습니다. SwiftUI는 2019년 WWDC19에서 공개되었으니, 벌써 등장한지 몇년이나 지난 UI 프레임워크이다. UIKit으로 개발하는 법은 잘 모르지만, 기존보다 DX가 향상된 개발 방법인 것 같다. SwiftUI를 React와 비교하면서 생각하게 된 이유는 아무래도 일단 둘 모두 선언형으로 작성할 수 있고, 화면에서 변수를 처리하기 위해서 State를 사용한다는 점이다. import {useState} from "react"; function App() { const [etcState, setEtcStat..

React Suspense와 React-Query, 그리고 react-error-boundary

React의 Suspense 기능이 추가된 이래로, React-Query와 같은 비동기 상태 처리 라이브러리는 suspense 기능을 지원하게 되었다. 그리고 이번에 카카오페이 기술 블로그의 글을 보았는데, 여기에 더해서 react-error-boundary 라이브러리로 에러처리까지 한 번에 하는 것이 매우매우매우 인상적이었다. 🍓 사실, 에러 처리나 로딩 관련 로직은 필요하면서도 반복적인 코드가 계속 들어가게 만드는 문제가 있기에 이 방법이 더 가치있는 것 같다. 그래서, 이번에 이 세가지 기술들을 직접 사용해보고 기록을 남기기로 하였다. 기본적인 구조는 다음과 같다. import styles from "./page.module.css"; import React, { Suspense } from "re..

useReducer의 장점 알아보기 (vs useState)

useReducer의 존재는 알고있었고, useState를 대체한다는 점 역시 알고있었다. redux의 dispatch나 reducer 개념이 useReducer로부터 비롯되었다는 것도 알았지만- 실제로 무슨 장점이 있기에 useState대신 useReducer를 쓰는가에 대해서 진지하게 생각해본적이 없었다는 것을 알게 되었다. 따라서, 이번 기회에 useReducer의 장점에 대해서 기록해보고자 하였다. 🐥 닉네임과 보유한 캐시를 상태로 가지는 컴포넌트를 가정하고, useState와 useReducer를 비교해보는 예제를 만들었다. 일단, useState를 사용한 예제이다. import { useState } from "react"; export default function App() { const ..

브라우저 인터넷 연결 확인하기 (with Javascript, React 커스텀 훅)

브라우저가 인터넷에 연결되어 있는지는 기본적으로 navigator.onLine 변수를 확인할 수 있다. boolean값으로 인터넷에 연결되어 있는지 확인할 수 있다. 다만, 지속적으로 브라우저가 인터넷에 연결되어있는지 확인하기 위해서는 이벤트 핸들러의 연결이 필요하다. 브라우저에서 지속적으로 인터넷 연결을 확인하는 방법으로 eventListener를 사용할 수 있다. 다음과 같은 간단한 코드를 통해서 인터넷 연결을 확인할 수 있다. window.addEventListener("online", () => console.log("ONLINE! 🐥")); window.addEventListener("offline", () => console.log("OFFLINE... 😿")); 콘솔창에 위의 코드를 입력하고..