react (3) 썸네일형 리스트형 [React] 리액트 원형 프로그래스 (Circle Progress Bar) 컴포넌트 만들기/예제 이런 식으로 생긴 원형 Progress는 자주 사용되는 디자인 요소 중 하나이다. 이런 프로그래스 컴포넌트를 라이브러리가 아닌, 직접 커스텀할 수 있는 컴포넌트로 생성해 보았다. 게시글에 올라가는 코드는 React 프로젝트이지만, 애니메이션 부분을 React Native에서 제공하는 Animated를 활용하여 Path 컴포넌트에 애니메이션을 적용하면 동일하게 작동된다. 전체 코드의 완성본은 다음과 같다. 반지름과 수치를 조절할 수 있는 range bar를 태그를 활용해 생성하였고, react-color라는 괜찮은 라이브러리가 있어 색상 피커도 추가해보았다. 포스팅에서는 가장 중요한 CircleProgress 컴포넌트에 대해서만 설명하도록 한다. CircleProgress.tsximport { animat.. [React / React Native] use-immer 란? https://github.com/immerjs/use-immer GitHub - immerjs/use-immer: Use immer to drive state with a React hooks Use immer to drive state with a React hooks. Contribute to immerjs/use-immer development by creating an account on GitHub. github.com A hook to use immer as a React hook to manipulate state. ⇒ immer 라이브러리를 기반으로 만들어진 React 환경에서 상태 관리를 할 수 있는 훅이다. 특징 use-immer의 특징은 다음과 같다. 복잡한 상태 업데이트: 상태가 .. [React Native/RN] npm과 yarn의 차이 JS 패키지 매니저 자바스크립트에서 많이 사용하는 패키지 매니저는 'npm'과 'yarn'이 있다. 두 가지 모두 JavaScript 프로젝트에서 의존성 관리와 패키지 설치를 용이하게 해주는 도구이다. 패키지를 쉽게 찾고, 다운로드하며, 의존성을 해결하여 프로젝트에 통합할 수 있도록 도와주는 역할을 한다. npm (Node Package Manager) https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript developmen.. 이전 1 다음
