useAsync() 는 react-async 라이브러리에서 제공하는 hooks 다. react component 에서 비동기 통신으로 받아온 데이터를 쓸 때, 함수형 컴포넌트 앞에 async 를 붙여주면 오류가 뜬다. 이럴 때 useAsync() 를 사용한다. 사용법은 이렇다. export const searchDetailById = async ({ id }) => { const { data: result } = await axios.get( `https://www.serveradress?id=${id}` ); return result; }; import { useAsync } from "react-async"; import { searchDetailById } from "./Data"; function..
react
Namespace 'React' has no exported member ... react 코드를 next 로 옮기다가... 첫 설치 때 --template typescript 를 잘못 먹인건지 이런 에러가 떴다. 나의 경우는 Namespace 'React' has no exported memter 'ChangeEvent' ... 였다. 찾아보니.. node_modeules/@types/react 폴더의 global.d.ts 파일이 누락돼서 생긴 문제라고 한다. @types/teact 를 재설치해주면 된다. 아래 명령어를 실행시켜주면 해결! npm install @types/react --save
✨ 프로젝트 목표 서버 입출력 없이 React, Recoil, Typesciprt 를 적용한 앱을 만들어보며 각각에 익숙해지기. 처음부터 세가지 다 적용하지 않고, 하나씩 적용해보며 왜 이러한 라이브러리를 쓰는지, 얼마나 효율적인지, 어떤 구조로 작성할지를 생각해보자. ✨ 이번 페이지 목표 React 는 하나의 페이지를 작은 단위의 컴포넌트로 쪼개는 작업, 컴포넌트화가 중요하다. 어떤 요소를 어떻게 쪼갤지, 요소에 어떤 데이터를 바인딩 시킬지를 생각해보자. ✨ 시작 1. 화면 설계 메인 화면은 왼쪽과 같다. (카톡을 좀 베꼈다 ㅎㅎ) 서치박스에 이름을 입력하면 해당하는 Friend 가 뜨고 Friend 를 누르면 오른쪽의 상세 정보가 뜨는 간단한 앱이다. 다른 버튼들은 그냥 장식이다. 2. 이 화면을 어..
typescript 는 let, const 면 다 되는 javascript에 string, object, array, int 등의 data type 이 추가된 것이다. React는 javascript 로 작성하는 프론트엔드쪽 라이브러리다. 즉, javascript로 작성해도 문제 없이 돌아간다는 얘기다. 그럼에도 내가 typescript 로 작성하기를 선택한 이유를 말해보려 한다. 굳이? typescript 는 웹 브라우저가 이해하지 못하는 언어라 ts로 작성된 react 프로젝트를 빌드 시 javascript로 다시 변환하는 작업이 추가된다. 그리고 type 을 지정해주지 않으면 계속 'type 좀 지정해라!' 라는 에러를 띄운다. javascript에서는 잘 돌아가던 놈이 잔소리를 해대니, 이게 참...
