react4 [React] 숫자 증가 애니메이션 만들기 (with. TypeScript) 여러 웹 서비스를 이용하다 보면 숫자를 강조하는 방법 중 하나로 숫자가 빠르게 올라가는 애니메이션을 확인할 수 있습니다. 리액트를 이용하여 어떻게 구현할지에 대해 작성해보도록 하겠습니다. ❗️ 조건 1. 숫자는 0부터 시작해서 증가해야 합니다. 2. 숫자들이 주어진 시간 동안 증가하는 애니메이션을 보여주어야 합니다. 3. 시간이 흐를수록 숫자 증가량이 줄어들어야 합니다. (easeOut 효과) 📖 컴포넌트 및 변수 구성 컴포넌트와 변수는 해당 포스트 작성을 위해 임의로 작성된 내용입니다. 최종적으로 보여질 숫자와 텍스트를 변수로 저장하였습니다. 부모 컴포넌트를 하나 생성하고, 그 아래에 방문수, 좋아요, 댓글수가 보여질 컴포넌트를 반복문을 이용하여 생성하였습니다. type TyContents = [str.. 2022. 7. 7. [React with Typescript] React에 Typescript 적용시키기 (1) 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다. 📝 React에 TypeScript 적용시키기 (1) 본 글은 자세한 개념 정리가 아닌, 공식문서 및 여러 강의를 듣고 개인 학습 및 복습용으로 작성하였습니다. 리액트에 타입스크립트 추가하기 CRA (create-react-app) 을 통해서 간단하게 적용시킬 수 있습니다. 초기 새로운 프로젝트를 생성할때 적용시키기 위해서는 아래의 명령어를 사용하면 됩니다. npx create-react-app my-app --template typescript 리액트 프로젝트 생성을 위해서는 --template 옵션이 들어가지 않아서 모르다가 타입스크립트를 추가하면서 처음 접.. 2022. 1. 8. [React] React Router v6 기초 학습 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다 📝 React-Router (v6) React Router(v6) 공식문서의 Overview와 API Reference 페이지를 읽고 정리한 내용입니다. 1. v5 에서 v6 업그레이드 되면서 달라진 내용 지금의 문서는 v6 의 내용을 정리하기 위해 작성중이므로 v5 와 관련된 내용을 자세히 다루지 않겠지만, 공부중 발견한 가 초기의 나에게 혼동을 주어 여기서도 아주 간략히만 다뤄볼 계획이다 1) v5 의 react-router-dom 을 기본적으로 공식문서를 참고하여 학습하던 중 이해가 부족한 부분은 다른 개발자들의 코드를 참고하게 되었다 그러던 중 공식문서에서 .. 2021. 12. 30. [React] 클래스형과 함수형 컴포넌트 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다. 📝 클래스형과 함수형 컴포넌트 공식문서와 유튜브 영상들을 참고해서 공부하던 중 컴포넌트를 사용하는 방식이 클래스형과 함수형 두가지가 존재하는것을 알게 되었다. 이 두가지 방식을 보고 어떤게 더 좋고 미래에 자주 사용할지 등과 같은 여러 사항들이 궁금해져 조금 더 공부해보려 한다. 두개 중 어느것이 좋고 승자를 가리기보다 두가지를 비교하고 차이점을 알고자한다. 1. 과거와 현재 과거 다수의 사람들은 과거에 함수형 보다는 클래스형 컴포넌트를 주로 사용해왔다. 과거에 클래스형을 많이 사용했던 대표적인 이유로는 state와 컴포넌트 LifeCycle을 사용할 수 있었기 .. 2021. 12. 29. 이전 1 다음
