Study/React6 [ React ] Zustand로 상태 관리하기 🐻 (with. Typescript) Zustand란? Zustand는 독일어로 '상태'라는 뜻을 가진 작고 빠르며 확장 가능한 상태 관리 라이브러리이다. Zustand는 사용법이 간단하고, Redux나 Recoil과 달리 앱을 감싸는 별도의 provider가 없어도 상태 관리가 가능하다. 또, context api 를 이용하여 상태 관리를 할 때 발생하는 리렌더링은 context 분리, memoization 등을 통해 해결해야 한다. 반면 zustand를 이용하면 상태 변경 시 불필요한 리렌더링을 쉽게 방지할 수 있다. ( 공식문서 | 유사한 상태관리 라이브러리와 비교 ) 더보기 Zustand의 특징 - 특정 라이브러리를 강제하지 않는다. - 한 개의 중앙에 집중된 형식의 스토어 구조를 활용한다. - 상태를 정의하고 사용하는 방법이 단순하.. 2024. 2. 19. 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. React.js - SPA / React Router SPA 란? Single Page Application(싱글 페이지 에플리케이션)의 약자 -기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니라 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. 규모가 큰 웹사이트의 경우 수백개의 웹페이지가 존재하는데 이것을 각 페이지마다 HTML로 만드는 것은 상당히 비효율적이고 관리하기 힘들다. 그래서 하나의 HTML에다가 사용자가 특정 페이지를 호출할 때 그 HTML에다가 내용을 채워서 보내주는 것이 SPA이다. 이러한 Single-Page Application을 만드는데 가장 많이 쓰이는 javascript 라이브러리 중 하나가 바로 React이다. SPA의 단점 앱의 규모가 커지면 자바스크립트 파일이 너.. 2023. 6. 22. 이전 1 2 다음
