with with

react-router-dom (v5.3.0 기준) useLocation hook은 동적인 현 위치의 객체를 반환한다. 무엇보다, useLocation을 사용하는 주된 내용은 페이지 전환시 데이터를 보낼 수 있다는 것이다. 을 보면 state에 객체가 들어가 있는데, 이 객체에 이전 페이지에서 보내고 싶은 데이터를 담아 다음 페이지로 보내면, useLocation을 통해 보낸 데이터를 받을 수 있다. 이 방법을 이용하면, 로딩 중에도 특정 데이터는 사용자에게 보여줄 수 있기 때문에 사용자 경험이 증대된다. 데이터를 보내는 방법은 아래의 코드를 참고하자. // Coins.tsx // Coin.tsx const { state } = useLocation(); Coins.tsx에서 Link to를 통해 sta..

react-router-dom (v5.3.0 기준) useParams hook은 동적으로 움직이는 주소창에 있는 내용중 일부를 반환해준다. 반환하는 내용은 ... 에 있는 params를 반환해준다. 예로 들어 아래의 코드가 있다고 가정해보자. // Router.tsx // Coins.tsx // Coin.tsx const { coinId } = useParams(); Router.tsx에서 Route path의 형식을 /:coinId 라고 지정해줬다. 따라서 Coin.tsx에서 useParams를 이용해 받는 객체에서 키 이름은 coinId가 된다. 또한, Coins.tsx에서 Link to를 통해 코인 아이디 값을 넘겨준다. 만약 넘겨주는 값이 eth-ethereum 이라면, Coin.tsx에서 받는 ..

reart-query 라이브러리에서 제공하는 useQuery hook는 api 호출의 과정을 간략화 해줄 뿐만 아니라, 캐싱을 이용해 api호출의 빈도를 최소화한다. useQuery를 사용하기 이전에 api를 호출하려면 다음과 같이 코드를 작성해야 했다. const [loading, setLoading] = useState(true); const { coinId } = useParams(); const [info, setInfo] = useState(); const [priceInfo, setPriceInfo] = useState(); useEffect(() => { (async () => { const infoData = await ( await fetch(`https://api.coinpaprika...

리엑트를 사용하면 개발자를 위한 여러 라이브러리가 많이 제공되고 있기 때문에 프로젝트를 본격적으로 진행하기 전에 미리 필요한 라이브러리를 설치하여 준비하는 것이 좋다. 아래에는 리엑트 프로젝트 만들 때 기본적으로 세팅하면 편한 라이브러리를 정리한다. 1. 리엑트 프로젝트 생성 리엑트는 다음의 커맨드로 typescript 기반 프로젝트를 생성하는 것이 좋다. npx create-react-app --template typescript ts는 처음 사용하면 미리 지정해줘야 하는게 많아 자칫 귀찮게 생각할 수 있지만, 나중에 자동완성 기능이나, 런타임 이전에 에러를 발견하고 해결할 수 있다는 장점이 더 크기 때문에 사용하는게 좋다. 2. (option) 필요없는 파일 삭제 /src 폴더에 기본적으로 들어있는 ..

매개변수의 타입을 지정할 때 리엑트에서 기본으로 제공하는 타입을 정리합니다. 공부하면서 새롭게 보이는 타입은 지속적으로 추가할 예정입니다. 전체 이벤트 타입은 아래의 공식문서에 나와 있습니다. SyntheticEvent – React A JavaScript library for building user interfaces reactjs.org React.FormEvent import React, { useState } from "react"; function App() { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event;..