React - 기초 ( 단어장2 API , Hooks, REST_API)

- API

지금까지는 data.json에 있는 더미 데이터 파일을 import 해서 사용하였지만 이제는 해당 json 객체를 node js에서 지원하는 json-server 모듈을 이용하여 사용하기로 했다.

json-server

json-server json-server --watch ./src/db/data.json 명령어를 이용하여 3001번 포트에 API로 받을 객체를 띄어준다. 이후 해당 주소창을 검색하면 위와 같이 객체들을 확인할 수 있다. 이렇게 받아온 객체들은 단어들을 표시하는 경우, DAY를 표시하는 경우 등 많은 경우에 사용되기 때문에 React Hooks를 이용하여 작성을 할 것이다.

- React Hooks

Hooks

useFetch라는 hooks을 만들어주고, 원하는 컴포넌트에 import useFetch from '../hooks/useFetch' 를 통해 임포트 해해줍니다. CallAPI() 비동기 통신을 이용하여 url을 fetch 해주고, 해당 url을 매개변수로 넘겨줍니다. 다른 컴포넌트에서 해당 Hooks를 사용하려면 useFetch("원하는 API주소")로 입력해 줄 수 있습니다.

- DayList.js

DayList.js

dummy데이터가 아닌 API와 json서버를 이용하여 변수 days에 day 객체를 받아옵니다.

Day.js

Day.js에서도 역시 API를 통해 useparam과 useFetch를 이용하여 각각의 day에 맞는 데이터를 가져옵니다.
이제 dummy 데이터를 가져오는 부분을 useFetch Hooks를 이용하여 간편하고 쉽게 구현한 것을 알 수 있습니다.

- REST_API

Rest_API란 API를 이용하여 통신을 할 때 CRUD를 제어하기 위한 약속을 말한다.
CRUD는 크게 생성,읽기,갱신,삭제로 나눌 수 있는데 REST_API에서는 이러한 CRUD를 해당 이미지와 같이 정리하였다.

REST API

현재 DAY 일 수와 DAY에 맞는 단어 목록을 가져오는 READ에 성공하였기 때문에 새로 DAY와 단어를 추가하는 POST를 사용할 것이다.

- CreateDay.js

CreateDay.js

새로운 DAY를 추가하는 CreateDay 컴포넌트이다. addDay함수를 통해서 day를 추가할 수 있는데 함수를 호출하는 fetch를 보면 새로운 DAY를 추가하기 때문에 method: POST로 설정한 것을 볼 수 있습니다. body 부분에는 json 형식을 추가해줍니다. DAY 추가가 완료되면 완료되었다는 메시지를 띄운 후 history함수를 이용하여 루트 페이지로 돌아가 줍니다.

- CreateWord.js

CreateWord.js

JSX부분을 확인해보면 CreateWord 컴포넌트는 단어와 단어의 의미를 나타내는 Input박스와 Day를 설정하는 select 태그가 있는 것을 알 수 있다. 이러한 특정한 DOM의 값을 뽑아내기 위해 useRef()를 이용하여 각각의 값을 가져온다.
각각의 값을 API에 추가해야하기 때문에 POST를 이용하여 추가해 준다. 추가하는 동안은 다른 작업을 할 수 없도록 isLoading 변수를 추가하여 제어해줍니다.

완성 된 모습

해당 이미지와 같이 완성된 모습을 확인할 수 있다.

이번 react 강의를 듣고 난 후 현재는 json-server를 통해서 API를 호출해 오지만 복습을 하면서는 mysql 혹은 mongoDB를 이용해서 나 자신만의 CheckList를 만들기로 결정하였다.


강의 영상 : https://www.youtube.com/watch?v=05uFo_-SGXU&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-
Github주소 : https://github.com/beombeom1119/react_word

GitHub - beombeom1119/react_word