React7 [ React ] Zustand로 상태 관리하기 🐻 (with. Typescript) Zustand란? Zustand는 독일어로 '상태'라는 뜻을 가진 작고 빠르며 확장 가능한 상태 관리 라이브러리이다. Zustand는 사용법이 간단하고, Redux나 Recoil과 달리 앱을 감싸는 별도의 provider가 없어도 상태 관리가 가능하다. 또, context api 를 이용하여 상태 관리를 할 때 발생하는 리렌더링은 context 분리, memoization 등을 통해 해결해야 한다. 반면 zustand를 이용하면 상태 변경 시 불필요한 리렌더링을 쉽게 방지할 수 있다. ( 공식문서 | 유사한 상태관리 라이브러리와 비교 ) 더보기 Zustand의 특징 - 특정 라이브러리를 강제하지 않는다. - 한 개의 중앙에 집중된 형식의 스토어 구조를 활용한다. - 상태를 정의하고 사용하는 방법이 단순하.. 2024. 2. 19. 페이지 로딩 속도 테스트 후 리팩토링 계획 SPA가 대세로 자리매김한 요즘 사이트 최초 로딩 속도는 사이트의 품질 뿐만 아니라 프론트엔드 개발자의 실력까지 볼 수 있는 지표가 되었다고 한다. SPA에서 페이지가 로드되었을 때 바로 VIews의 Interaction이 가능하도록 페이지 로드에 필요한 모든 것들을 맨 처음에 한번에 로딩하기 때문에... 구글은 최초 페이지 로딩이 3초 이상 걸릴 경우 50%의 사용자가 이탈한다는 분석값을 내놓았으며, 페이지 로딩 시간이 긴 경우 검색 순위를 낮추겠다는 말까지 나왔다고 한다. 페이지 최적화를 테스트 하기 위해 Pagespeed Insights 를 이용했다. 모바일과 데스크톱 모두 노란불... 이미지 크기가 커서 포트폴리오 페이지에서도 불러오는 게 과하게 늦다고 생각하고 있었는 데 파비콘과 다른 이미지들도.. 2023. 11. 28. Recoil에 대해 알아보자. 리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있다. 페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다."라는 내용을 장점으로 내세운다. 리코일을 사용해 어플리케이션을 구성하면 아래와 같은 형태가 된다. 리코일은 전역으로 사용할 값의 단위로 데이터를 관리하며, 이 값들을 아톰(Atom)이라 부른다. Redux와의 차이 flux 아키텍처 기반의 리덕스는 안정적인 전역상태 관리가 가능하지만, 몇가지 문제들이 있었다. 리액트 전용 라이브러리가 아니다. 리액트 관점에선 Store가 외부요인으로 취급되며, 동시성 모드를 구현하기에 호환성이 부족하다. 복잡한 Boiler Plate 초기세팅이 요구된다. Store, Action, .. 2023. 10. 17. React.js - State / Props State와 Props는 React에서 데이터를 사용할 때 다루는 개념이다. Props 컴포넌트는, 데이터를 가진 하나의 'props' 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이때 props는 속성을 나타내는 데이터다. 컴포넌트에서 컴포넌트로 전달하는 데이터다. 컴포넌트의 속성으로, 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정 가능하다. 형태로 컴포넌트를 부를 때 함께 지정한다. 읽기 전용이므로 컴포넌트의 내부에서 props를 수정해서는 안 된다. 입력값을 수정하지 않는 함수를 순수 함수라고 호칭하며, 모든 React 컴포넌트는 자신의 props를 다룰 때, 순수 함수처럼 동작해야한다. State state는 컴포넌트 내부의 동적 데이터를 의미한다. props는 부모 컴포넌트가.. 2023. 6. 22. 이전 1 2 다음
