with with

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;..

React에서 제공하는 useEffect() 함수는 특정 데이터가 변화할 때에만 특정 코드를 실행할 수 있게 해준다. React의 특성상 컴포넌트(함수)내의 일부 데이터가 변화해도 컴포넌트(함수) 전체를 재 실행하여 리턴한다. 그래서 만약에 한 번만 불러와도 될 api의 경우, 사용자가 버튼 몇 번 클릭하면 api가 계속해서 호출되어 쓸데없이 리소스를 잡아먹을 수 있는 상황이 발생할 수 있다는 뜻이다. (rum.. 오타있네요.. run!) 실제로 input에 글자를 치기만 하는데도 Line. 9의 console.log가 계속해서 찍히는 것을 확인할 수 있다. 이런경우를 방지하기 위해 React에서 제시하는 방법은 useEffect이다. useEffect는 반환값은 없지만 두 개의 파라미터를 필요로 한다...

html, css를 공부하자마자 바로 연습할 겸 사이트 하나 만들어봤다. 하지만 만들면서 금세 한계점을 느끼게 된다. 단일 html 사이트 내에서는 어떻게든 만들고 싶은대로 만들 수 있었지만, 여러개의 html 사이트를 만들면 그 사이트 간의 이동이 부드럽지 않을 뿐더러 원하는 효과를 주기 어려웠다. 그렇다고 한 html 파일 안에 모든 코드를 다 넣자니 너무 파일이 커져서 보기에 좋지 않을거 같았다. 그래서 React를 이용해 js 코드로 사이트를 만들어 더욱 유지보수하기 편하고, 분할/정복도 깔끔하게 달성할 수 있도록 사이트를 고쳐보기로 작정했다. 그러기 위해서는 일단 React를 공부해야만 했기에, 바로 시작했다. 그 시작은 우선 React를 설치하는 것! 사실 설치하지 않고도 리엑트를 사용할 수 ..

이전 이야기(명일방주 0지역 스토리) 다음 이야기(명일방주 2지역 스토리) 재앙은 박사 일행에게 압박을 주었으나, 니어의 인간적인 모습은 그런 분위기를 어느정도 누그러뜨렸다. 복귀하는 길, 온기가 남아있는 텅 빈 감염자 치료소 "아자젤"을 발견한 박사 일행. 아미야는 그 곳에서 감염자의 처지에 대해 입을 떼었다. 체르노보그에서 사회적으로 격리되고, 차벌받고, 추방 당하는 감염자의 마지막 보루였던 아자젤 치료소의 말로와 같이 감염자들도 결국 이런 결말을 맞을 수 밖에 없다는 이야기를 하며, 로도스도 아자젤과 같을 지도 모른다고 생각하는 아미야였다. 또 다른 재앙의 징조가 짙어짐에 따라, 도베르만은 한 사람의 교관으로서 박사를 인정하며 박사의 판단을 따르기로 한다. 리유니온 잔당 무리를 돌파하며, 꾸물거릴 ..

관계도 [이름(작중 다른이름)] 이해를 돕기 위해 작중 다른이름도 같이 정리했습니다. 따라서 약간의 스포일러가 될 수 있다는 점 참고 바랍니다. 작중 인물은 개인과 집단의 이해에 의해 움직이는 거라 선/악 구분이 명확하진 않지만, 대략적인 세력도와 협력 관계 파악을 위해 박사를 기준으로 선/중립/악을 구분하였습니다. (개인적인 견해 반영됨) - 로도스 아일랜드: 아미야(카우스트 소녀), 박사, 히비스커스, 샤이닝, 나이팅게일(리즈) - 감정회: 연로한 기사(신비한 기사, 이롤레타 로시, 그랜드 마스터, 대기사장, 러셀), 그라벨, 무에나(마리아 삼촌), 실버랜스 페가수스(출정 기사, 군대) - 상업 연합회: 대변인 맥키, 대변인 말키위츠, 기업 직원(쥬얼), 대변인 차르니 ㄴ 아머레스 유니온: 플래티넘(..