어제의 나보다 성장한 오늘의 나

이전에 프로젝트에서 클라이언트 애플리케이션 내의 모든 전역 상태를 Recoil로 통합 관리하고 있었습니다.하지만 프로젝트의 구조가 점점 바뀌면서, Recoil의 역할이 줄어들게 되었습니다. 서버 상태는 React Query로 대체우선, React Query의 도입으로 서버 상태 관리 방식이 완전히 바뀌었습니다.데이터 fetching, 캐싱, 로딩 상태 관리 등을 React Query로 손 쉽게 처리하면서 Recoil은 더 이상 서버 상태를 다루지 않게 되었습니다. Recoil은 여전히 클라이언트 전역 상태(UI 상태, Role)를 관리하는 용도로 일부 사용되고 있었습니다.제한적인 역할만 수행하면서도 비교적 무거운 Recoil을 계속 유지하는 것은 부담스럽다고 판단했습니다. Context API는 ??co..

리액트에서 클래스를 설계하고 컴포넌트 내에서 클래스 인스턴스를 활용하는 코드를 작성하였는데, 더 효율적으로 관리하는 방법을 배우게 되어 공유하고 싶은 마음에 글을 작성하게 되었습니다. 두 가지에 초점을 맞췄습니다 1) 인스턴스의 불필요한 재렌더링 방지 2) 인스턴스의 전역적인 접근 막기 ( 사이드 이펙트 방지 차원 ) 1. 처음 작성했던 클래스 방식 ( 예시 코드 ) calculator.js export class Calculator { add(a, b) { return a + b; } multiply(a, b) { return a * b; } } page.jsx export default function Page(){ const [first , setFirst] = useState(1); const [..

리액트 공식 문서에 따르면 useSyncExternalStore는 '외부 스토어를 구독할 수 있는 React 훅' 이라고 나와있습니다. 외부 스토어가 뭘까요?? 반대로 외부 스토어가 아닌 경우에 대해서 먼저 생각해보면 이해하기가 수월합니다. 보통 우리는 구독할 데이터를 useState나 useContext 등의 리액트 훅을 이용하여 state에 저장 하고 사용합니다. setState로 값을 수정하면 자동으로 리렌더링이 일어나죠. 하지만 이것들은 리액트 내부에서 사용될 때만 가능합니다. 리액트 훅이니까요. 반대로 리액트 내부에서 이용하지 않는 경우는 뭐가 있을 까요?? class를 사용하거나 function 으로 만들어 외부 저장소를 만드는 경우를 들 수 있습니다. counter.js 클래스 형태 cla..