본문 바로가기

react13

React(15) 모바일앱인척 발행하기 목차 PWA에 대해 PWA 세팅방법 PWA에 대해 리액트로 웹사이트를 근사하게 만들었다면, PWA로 발행하여 앱인 것 처럼 사기(?)를 쳐서 발행할 수 있다. PWA란 PWA는 프로그레시브 웹 앱(progressive web app)의 줄임말으로, HTML, CSS, 자바스크립트(JavaScript)와 같은 웹 기술로 만드는 앱이다. 트위터, 핀터레스트, 스타벅스, 워싱턴포스트, 우버 등 여러 기업에서 UX를 제공하고 있다. 장점으로는, 앱스토어에 출시하면 별도의 프로세스를 거쳐야하고, 수수료도 빼앗기게 되지만, PWA를 이용한다면 이러한 마케팅 비용을 절약 할 수있다. 또한, 검색 엔진을 통해서 서비스를 찾을 수 있는 점으로, 높은 참여를 이끌어낼 수 있다. 푸쉬 알림을 통해서 사용자들의 관심을 끌수 .. 2023. 8. 19.
React(14) 성능을 개선하는 요소들 목차 memo Lazy import Suspense useTransition, useDeferredValue 부모가 렌더링될 때, 자식은 필요할때만 렌더링 하고싶을 때 : memo 부모 컴포넌트 안에, 자식 컴포넌트가 있다고 가정하자, 이 때, 부모에 있는 state가 변경되었을 때, 부모 컴포넌트와, 자식 컴포넌트도 덩달아 재렌더링이 된다. 자식 컴포넌트가 굉장히 많은 연산을 해야하는 컴포넌트일 경우, 자식컴포넌트는 렌더링이 안되고, 필요할때만 렌더링 하고 싶을 때 사용하는 memo에 대해 알아보자. 사용방법은, import { memo } from "react"로 import 하고, 재렌더링 되기 싫은 자식 컴포넌트에다가 적용시키면 된다. 자식 컴포넌트가 재렌더링 안되는 모습을 볼 수 있다. 필요할 .. 2023. 8. 19.
React(13) 실시간으로 데이터를 보여주려면 : react-query 목차 react-query 세팅방법 react-query 사용방법 react-query 세팅방법 여느 때와 같이, 터미널에, npm install react-query 로 설치를 하면된다. index.js 에 가서, 세팅을 해야하는데, 밑과 같이 세팅해주면 된다 App.js에서는 import { useQuery } from "react-query"; 로 import 해오면 세팅 완료이다. react-query 사용방법 react-query는, 통신을, 실시간으로 하는데에 목적이 있으므로, axios로 data를 get하는 코드와 함께 쓰는데, 기본 문법은 다음 코드와 같다. useQuery("키 이름", () => { return axios.get("통신받을 URL").then((a)=>{ return.. 2023. 8. 18.
React(12) state 전달하려면 상속을 많이 받아야 할 때 : Redux 목차 Redux 사용하기 세팅방법 보관하고 사용하기 리액트를 사용하다보면, 자연스레 컴포넌트들이 엄청나게 많아지고, 컴포넌트안의 컴포넌트안의 컴포넌트 . . . 등 엄청나게 많은 부모 자식관계를 형성하게 된다. 그럴때마다, props.props.props.props.name 이라고 state를 할 수는 없는 노릇이므로, Redux라는 편한 라이브러리 사용하는 법을 알아보자. Redux는 redux store.js라는 하나의 js파일에다가, 모든 state들을 보관해 놓을 수 있다. (html의 localStorage처럼) 하지만 모든 state들을 저장 해놓을 필요는 없고, 모든 컴포넌트에서 자주 사용하는 state만 저장해놓으면 된다. ( 예) 다이어트앱을 만든다고 가정했을 때, 몸무게 state) R.. 2023. 8. 5.