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

리액트에서 클래스를 설계하고 컴포넌트 내에서 클래스 인스턴스를 활용하는 코드를 작성하였는데, 더 효율적으로 관리하는 방법을 배우게 되어 공유하고 싶은 마음에 글을 작성하게 되었습니다. 두 가지에 초점을 맞췄습니다 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..