react5 # 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 #6-1 State Management 6.0 Dark Mode 1,20) Intro지금부터는 Recoil라이브러리를 이용하여 다크테마와 라이트테마를 설정하도록 해볼 것이다. 하지만, 라이브러리의 편리성을 확인하기 위해 라이브러리 없이 다크모드와 라이트모드를 적용하는 방식에 대해 알아보려고 한다. Recoil에 대한 학습을 할 때 왜 라이트모드와 다크모드로 예시를 들까? 이렇게 모드를 전환하는 상황은 ‘Global’하게 무언가를 적용하는 상황이다. 첫 랜딩페이지에서 다크모드를 설정했다면, 이후에 넘어가게 될 다른 페이지들도 다크모드로 설정했다는 사실을 알아야 한다. 즉 전역적으로 적용하기 위한 상황을 구현해보려고 한다. 우선 DarkMode 1,2 에서는 다크모드를 어떻게 적요하는지를 확인해보자. (1) Theme Provider우선 ind.. 2025. 2. 22. # 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 다음
