nomad coder4 # React-Js Master Class #6-2 State Management 6.6 Forms0) Intro지금부터는 form을 관리하는 방법에 대해 알아보려고 한다. form은 보통 언제 사용이 될까? 대부분의 웹페이지는 회원가입과 로그인을 첫 화면에 띄워주는데 여기서 사용되는 것이 form형식이다.form에서 꼭 필요한 기능에는 ‘입력값 검사’가 있다. 우리가 전에 했던 과제들에서 입력값을 끌어오는 것이 가능했다. 하지만, 값을 끌어오고, 그 값을 검사하는 것은 조금 더 복잡한 일이었다.우리는 form의 대표적인 기능인 입력값 검사나, form의 input을 확인하기 위해 React hook form을 사용해보려고 한다.1) Basic Validation라이브러리를 사용하기 전에 그 필요성을 느끼기 위해 라이브러리 없이 값을 검사하는 방법을 먼저 소개해보려고 한다.const .. 2025. 2. 24. # React-Js Master Class #5-3 Crypto Tracker 5.10,11 React QueryReact Query를 활용하면 api에서 정보를 fetch해오는 과정을 조금 더 간단하게 만들 수 있다.마지막 5단원 정리에서는 react query를 활용해서 데이터를 받아오는 과정은 기존 과정과 어떤 차이를 가지고 있고, 차이점에 따른 장점들에 대해 정리해보려고 한다.0) intro(1) Previous Method우선 기존에 api에서 데이터를 받아오는 코드를 살펴보자.//Coin.tsxuseEffect(()=>{ (async()=>{ const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await response.json(); setCoins(json.. 2025. 2. 17. # React-Js Master Class #5-2 Crypto Tracker 5.4 Route States1) Coin imagescoin의 이미지파일은, 코인의 코드를 알고 있다면 받을 수 있다. 따라서 map으로 coin리스트를 만드는 곳에 image의 src를 입력하여 보내줄 수 있다.coins.map(coin=> 이런식으로 코인의 symbol을 모두 소문자로 바꾼 값을 넣어주면 → 이미지사진을 얻을 수 있다.여기서 얻어가야 할 점은, api안에 있는 정보로 이미지 등 더 확장된 정보를 얻을 수 있다는 점이다.2) state지금부터는 한 페이지에서 다른 페이지로 정보를 전달하는 방법에 대해 알아보자. 지금 Coin페이지에선 coinId 즉, url동적 변수로 전달된 값을 useParams로 전달받아 이 값을 이용하고 있다. 하지만, url동적변수를 통해 정보를 받는 방법 .. 2025. 2. 11. # React-Js Master Class #5-1 Crypto Tracker 5.0 Setup1) installing styled component, router-domnpm install --save styled-componentsnpm i react-router-dom@5.3.0npm i --save-dev @types/react-router-dom여기서 실습을 하려면 router-dom 을 5.xx버전으로 입력해야 제대로 실행이 된다.2) Router, separating pages지금부터 만들 새로운 페이지들은 모두 src폴더 내에 만들 새로운 폴더 routes 에 저장할 것이다.routes폴더 안에 Coins, Coin이라는 페이지를 만들 것이다.//Coins.tsxfunction Coins(){ return Coin}export default Coin//Coin.ts.. 2025. 2. 9. 이전 1 다음
