zustand 리렌더링 문제점 zustand로 상태를 관리할 때 흔히 마주치는 문제가 있다. 위 코드처럼 BearStore를 생성하여 컴포넌트에서 사용할 경우, 특정 상태만 사용하더라도 스토어 내 다른 상태가 변경되면 불필요한 리렌더링이 발생한다. 예를 들어, 컴포넌트에서 useBearStore를 통해 bears 상태만 사용하고 있더라도, increa…

들어가며 지금까지 Redux toolkit을 사용하면서 useSelector 를 잘못 사용하고 있다는 것을 알게되었다. 다음과 같이 구조 분해 할당으로 useSelector 를 사용하고 있었다. 구조 분해 할당으로 useSelector 를 사용하면 어떤 문제가 생기는지, 그리고 어떻게 최적화할 수 있을지 이번 포스팅에서 다뤄보려고 한다. useSel…

최근 웹 애플리케이션의 복잡도가 증가하면서, 개발자들은 더 큰 규모의 리액트 프로젝트를 다루게 되었다. 이에 따라 번들 크기도 함께 커지면서, 초기 로딩 시간이 길어지는 문제가 발생하고 있다. 사용자들은 빠른 로딩과 부드러운 사용자 경험을 기대하는데, 이러한 기대를 충족시키기 위해 우리는 어떻게 해야 할까? 바로 여기서 코드 스플리팅(Code Split…

TypeScript 설치 및 설정 필요한 패키지를 설치하자. tsconfig-paths-webpack-plugin tsconfig.json 파일에 설정된 경로 별칭(path aliases)을 webpack에게 알려주고, 이러한 별칭을 해석하여 모듈을 로드할 때 실제 경로를 찾도록 도와주는 플러그인이다. 이 플러그인을 설치하지 않는다면 경로 별칭을 tsc…

들어가며 이 포스팅에서는 간단하게 설정 방법만 작성했다. 자세한 설명은 이 포스팅 에서 다룬다. 패키지 설치 babel 7버전부터 ts-loader 를 사용하지 않고 @babel/preset-typescript 를 사용하여 ts 파일을 컴파일 할 수 있다. 자세한 내용은 TypeScript With Babel: A Beautiful Marria…

이제 webpack을 설정해보자. webpack.common.js 먼저 webpack.common.js 를 생성할 것이다. 이 파일은 개발 환경과 배포 환경에서 공통적으로 사용되는 설정들을 담고 있다. 추가적인 설정에 관한 설명은 이 게시글이 너무 길어질 수 있기 때문에 자세하게 다루지 못하지만, 간단하게 주석으로 설명을 달아두었다. 개발 환경은 we…

들어가기 전에 React 환경을 구축하기 위해 CRA (Create-React-App) 를 사용한다면 기본적으로 Webpack과 Babel과 같은 설정들이 세팅되어 있다. 모듈 번들러(Module Bundler)에 대해 공부하면서 CRA 없이 React 프로젝트를 설정하고 싶었다. 그래서 CRA 없이 React 프로젝트를 시작하는 방법을 정리해보았다. …

들어가며 우리가 React를 사용하다보면 상태로 객체를 관리하는 경우가 많이 있다. 특히 애플리케이션의 복잡성이 증가하면서 한 개의 상태로 여러 값을 관리해야 할 때, 객체를 사용하는 것은 꽤 효율적인 방법일 수 있다. 그러나 이러한 방식이 useEffect 와 같은 훅에 적용될 때, 약간의 주의가 필요하다. JavaScript의 객체 비교 useEff…

들어가며 React를 사용하면서 useEffect 를 자연스럽게 활용해 왔다. 그러나, 'React는 useEffect를 어떻게 실행하는 걸까? 그리고 어떻게 변화를 감지하는거지?'라는 질문이 생겼다. useEffect 의 사용법은 알고 있지만, 이 훅이 어떻게 작동하는지에 대해서는 이해하지 못했다. 그래서 이번 포스팅에서는 useEffect 의 실…

들어가며 리액트 훅(Hooks)은 함수형 컴포넌트에서 상태와 생명 주기 기능을 사용할 수 있게 해주는 기능으로, useEffect , useCallback 그리고 useMemo 등이 있다. 이 훅들은 모두 의존성 배열(dependency array)을 사용하여 특정 값이 변경될 때에만 특정 로직이 실행되도록 제어할 수 있다. 이번 포스트에서는 의…