리엑트2 Redux vs Zustand Redux와, Zustand는 React 상태관리 라이브러리로, 두가지 라이브러리 다 Flux 패턴이다. Flux 패턴이란? 단방향 데이터 흐름을 구현하기 위한 클라이언트 사이드 웹 어플리케이션 아키텍쳐 패턴 데이터를 예층 가능하게 하고, 데이터 흐름의 복잡성을 해결하는 장점이 있다. MVC 패턴과, Flux 패턴를 비교를 해보자. MVC 패턴 Flux 패턴 구조 데이터 흐름 양방향 단방향 특징 상태값을 하위 컴포넌트로 전달해주기 위해 불필요한 컴포넌트에 상태값을 선언해야됩니다. 상태값을 store에서 관리하여 필요한 컴포넌트에서만 가져와 사용할 수 있도록 해결합니다. Zustand Redux 복잡한 상태 관리가 필요 없는 작은 규모의 프로젝트에 적합한 가벼운 상태 관리 라이브러리 복잡한 상태 관리를 필.. 2023. 12. 13. 코드 스플리팅(Code Splitting) 코드 스플리팅이란? 유저가 사용하는 앱이, 전달해야하는 파일이 커지고, 유저의 브라우저가 파싱(parsing)해야하는 정보도 많아지기 때문에, 하나의 파일을 여러개로 나누고, 우선순위를 두어 순서대로 로딩하는 것입니다. webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미합니다. 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서 입니다. Next.js 없이 React에서 코드 스플리팅 [ React.lazy ] 컴포넌트를 렌더링하는 시점에 비동기적으로 로딩할 수 있게 해주는 유틸 함수이다. [ Suspense ] 리액트 내장 컴포넌트로 코드 스플리팅 된 컴포넌트를.. 2023. 12. 2. 이전 1 다음
