ajax를 react hook처럼 쓸 수 있도록 하는 라이브러리인 axios-hooks를 배웠다. 그냥 axios로 ajax처리를 하려고 하면 useState를 사용하여 상태값을 정의하고, useEffect를 사용해 출력해야 한다. 그러나 axios-hooks를 쓰면 이러한 처리를 하지 않아도 된다. 먼저 라이브러리를 설치한다. yarn add axios-hooks 사용하는 방법은 단순하다. import React, {memo} from 'react'; import useAxios from 'axios-hooks'; const Titanic = memo(() => { const [{data, loading, error}, refetch] = useAxios('/titanic'); if(error) { c..
오늘은 React에서 ajax를 이용하여 데이터를 가지고 오는 것을 배웠다. ajax를 사용하기 위해서 json-server를 구성할 것이다. 먼저 json-server를 설치한다. npm install -g json-server -g 옵션은 global의 준말로, 특정 폴더에 종속되지 않고 현재 컴퓨터 사용자 계정에 대해 전역으로 사용할 수 있도록 설치된다. 그리고 json-server를 가동하기 위한 json 데이터를 구성한다. 이는 json 형태이면 어떤 데이터라도 괜찮다. 이런 json-server는 React를 구동시키며 함께 구동시킬 수 있다. 방법은 간단하다. React 작업 폴더에 있는 package.json 파일에 있는 scripts 중 start 항목에 "react-scripts sta..
리액트를 배웠다... 사실 배운지는 꽤 됐다... 저번주부터 배우기 시작했으니 딱 일주일 하고 하루 지났다. 클론코딩을 일주일, 세미 프로젝트를 일주일 간 진행하느라 그동안 글을 안 썼는데, 한동안 글을 안 쓰다보니 정리하기가 귀찮아져서 소홀했다... 이제부터 해야 하는데 조금 막막하다. 그래도 정리할 수 있는 건 최대한 해보려고 한다. React는 Node.js가 설치되어 있어야 한다. 그리고 나는 수업에서 yarn을 썼다. npm도 동일한 기능을 갖추고 있다고 하는데, 쓰다보니 yarn이 더 익숙해서 이대로 쓰고 있는 중이다. 전부 깔았다면 프로젝트를 생성해야 한다. 프로젝트 이름은 영어 소문자만 가능하다. yarn create react-app 프로젝트이름 그리고 이 프로젝트를 실행하기 위해서는 프..