이 글을 쓰게 된 배경은zustand의 z자도 모르고 썼던게 분명한 내가 잘못 사용해왔던 코드에 대한 깨달음과 부끄러움을 담은 글이다.(위 글은 Zustand의 최신 버전인 v5로 작성되었다)여러 상태를 사용할 때 하지말아야 할 것Not To Do: 구조 분해 할당으로 가져오기import { create } from 'zustand'const useEqpStore = create((set) => ({ type: 'printer', state: 'idle', process: 'none', subprocess: 'none', updateType: (newType) => set({ type: newType }), updateState: (newState) => set({ state: newState..
멋사에서 리액트를 공부하는 중에, 리액트에서 렌더링이 어떻게 이뤄지는지 익힘으로써, 앞으로 리액트에서 어떤 작업을 하더라도 설계한 대로 될 수 있도록 정리해보고자 한다. React에서의 렌더링 리액트의 렌더링 과정은 크게 세 단계(Trigger - Render - Commit)로 나뉜다. Trigger(Render Trigger) // main.jsx(or index.jsx) ReactDOM.createRoot(document.getElementById('root')).render( );위 코드를 실행하면서 리액트 렌더링 프로세스가 시작된다. 렌더링 트리거 단계에서는 애플리케이션에 변경사항이 발생할 때 새로운 렌더링을 시작하는데, 주요 트리거는 다음과 같다. 초기 렌더링: 컴포넌트 최초 생..
