React에서 XState 간단 사용 후기 😊

XState는 점점 더 단순화되어가는 상태관리 라이브러리들 중에서 좀 더 명확하게 역할을 나누고 책임을 부여한 컨셉의 상태관리 라이브러리이다. ❗ 이런 특징이 redux의 구조와 비슷하게 느껴지기도 한데, 이에 관해서는 직접 제작자가 밝힌 차이점이 있다.https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate What is an actual difference between redux and a state machine (e.g. xstate)?I am working on investigation of one front-end application o..

• format_list_bulleted React
• · 2025. 2. 13.
• textsms

React Compiler를 직접 사용해보기 🎶 (with. next 15)

복잡한 React 컴포넌트를 작성할 때, 은근 골치아픈게 memo, useMemo, useCallback과 같은 최적화이다. 물론, 최적화에 신경쓰지 않는다면 안써도 되는 경우도 많지만.useEffect 내부에서 상태를 변화시키는 함수를 호출시키는 경우에 이 함수는 useCallback으로 감싸져야 하며, 때때로 조건부 렌더링 컴포넌트는 memo로 최적화 시켜야 무한 렌더링을 방지할 수 있는 등등 여러 경우에 이런 최적화 코드는 필수가 될 때가 있다. (lint가 함수를 새빨갛게 표시하는 순간, useCallback을 써야하는 상황이라는 걸 바로 알 수 있다.... 💧) 때문에!React 19 버전의 발표를 유심히 본 사람들이라면, React Compiler의 존재를 보고 매우 기뻤을지도 모른다.(그리..

• format_list_bulleted React
• · 2024. 12. 10.
• textsms

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로 데이터를 전..

• format_list_bulleted React
• · 2024. 7. 24.
• textsms

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. 이 경고를 없애기 위해서 주로 사용..

• format_list_bulleted React
• · 2023. 9. 23.
• textsms

Server Component에서 Css-in-JS 라이브러리 사용하기 (feat. panda-css)

next.js의 app router가 stable되면서 app 폴더 내부에 생성된 컴포넌트는 기본적으로 server component로 설정되었다. chakra ui를 사용하던 중에 이 문제를 격하게 실감하게 되었다. RSC를 지원하지 않기 때문에 모든 컴포넌트에 "use clinet"를 사용해야 했고, 이렇게 되면 RSC를 사용하지 못하게 되는 단점이 있었다. 이에 대해서 chakra ui 깃허브 이슈를 살펴보던 중, 서버 컴포넌트를 지원하는 새로운 라이브러리르 만들었다는 제작자의 코멘트를 보았다. 그것이 바로 panda css였다. https://panda-css.com/ Panda CSS - Build modern websites using build time and type-safe CSS-in-..

• format_list_bulleted React
• · 2023. 8. 18.
• textsms

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

• format_list_bulleted React
• · 2023. 8. 14.
• textsms