유투버 코딩앙마님의 강의를 시청하며 만들어본 voca 입니다.
출처 : 코딩앙마
저장소 : (https://github.com/hyeyomi/daily_voca)
주의사항
json-sever를 사용하기 때문에 사이트에 접속할때마다
json-server ./src/component/db/data.json --port 3001명령어를 실행해야 data가 보여집니다.
1. 사이트 기능 소개
1. 학습된 단어 흐림 처리
2. 새로운 단어 추가
3. 새로운 Day 추가
4. 단어 삭제
- 추가작업
1. Day간의 이동을 위한 양옆에 화살표 추가
2. Day 삭제 기능 추가
2. 사용된 React Hook
2.1 useState()
: 컴포넌트의 state를 쉽게 생성하고 변경 가능
State란?
컴포넌트가 가질 수 있는 상태(값)
import { useState } from 'react';
const [isShow, setIsShow] = useState(false);
//isShow 선언, 초기값 false 설정
function showBtn() {
setIsShow(!isShow);
//state 변경은 setIsShow 함수를 불러와 변경될 값을 넣어줌
}위 코드의 isShow 컴포넌트는 setIsShow를 통해서만 값이 변경되고, 변경될때마다 해당 컴포넌트는 화면에 다시 랜더링되어 나타난다.
2.2 useEffect(func, deps)
function: 수행할 작업deps: 배열 형태, 변경과 같은 이벤트를 감시하고자 하는 특정 값
import { useEffect } from 'react';
useEffect(() => {
fetch(`http://localhost:3001/words?day=${day}`)
.then((res) => {
return res.json();
})
.then((data) => {
setWords(data);
});
}, [day]);위 코드에서 day 컴포넌트의 값이 변경될때마다 fetch가 이루어진다는 것을 확인할 수 있다. [day]가 아닌 빈배열[]이 들어간다면 사이트가 가장 처음 랜더링 될 때 한 번만 fetch가 실행될 것이다.
주로 useEffect는 사이트가 맨 처음 실행될때만 랜더링되길 바라거나, 특정 컴포넌트가 변경될때만 리랜더링되는 것을 바랄떄 사용된다.
2.3 useRef()
: 특정 DOM요소에 접근할 수 있도록 해주는 React Hook
새로운 단어를 만들기위해, 화면에 입력한 영어, 한글, 날짜의 정보를 useRef()를 이용해 json.db에 저장하였다.
function onSubmit(e) {
e.preventDefault();
if (!isLoading) {
setIsLoading(true);
fetch(`http://localhost:3001/words/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
day: dayRef.current.value,
eng: engRef.current.value, // engRef객체가 가리키는 DOM의 value값
kor: korRef.current.value,
isDone: false,
}),
}).then((res) => {
if (res.ok) {
alert('생성이 완료되었습니다.');
navigate(`/day/${dayRef.current.value}`);
setIsLoading(false);
}
});
}
}
const engRef = useRef(null); // useRef()를 사용해 Ref객체를 만들고,
const korRef = useRef(null);
const dayRef = useRef(null);return(
<form onSubmit={onSubmit}>
<div className='input_area'>
<label>Eng</label>
<input type='text'placeholder='computer'ref={engRef} required/>
// Ref객체가 사용되어야 할 DOM에 ref값으로 설정
</div>
</form>
)form을 통해 우리가 입력한 text가 engRef로 들어가, engRef.current.value를 json.db로 POST하는 코드를 확인할 수 있다.
1) 객체 생성하기
const engRef = useRef(null);2) 객체를 사용할 DOM위치에 ref 설정하기
<input type='text' ref= {engRef} required />3) .current를 사용해 DOM을 가리키기
eng: engRef.current.value, //.value로 해당 DOM의 값 받아옴3. JSON Sever
json-server는 json 파일을 사용해 간단한 시뮬레이션을 위한
REST API를 구축할 수 있는 도구이다.
1) json-serve 설치하기
npm install json-server 2) data.json 파일 생성하기
{
"days": [
{
"id": 1,
"day": 1
},
{
"id": 2,
"day": 2
},
{
"id": 3,
"day": 3
}
],
"words": [
{
"id": 2,
"day": "1",
"eng": "cute",
"kor": "귀여운",
"isDone": true
},
{
"id": 4,
"day": "2",
"eng": "plane",
"kor": "비행기",
"isDone": false
},
{
"id": 6,
"day": "3",
"eng": "apple",
"kor": "사과",
"isDone": false
}
]
}./src/component/db에 data.json파일을 생성하였다. daily_voca의 데이터베이스 역할을 한다.
3) json-server 실행
json-server --watch./src/component/db/data.json --port 3001json-server data.json의 위치 --port 포트번호
기본 local의 포트번호가 3000이기에 포트번호는 3001로 해주었다.
4. Rest API
: url과 각 method를 이용해서 CRUD를 편리하게 사용가능
CREAT : POST
READ : GET
UPDATE : PUT
DELETE : DELETE
우리가 작성한 data.json파일을 fetch로 불러와서 사용한다.
- 커스텀 훅
fetch하는 부분은 url만 다르고, 기본동작은 동일하기에 custom hook 커스텀 훅을 만들어서 사용하였다.
커스텀 훅 useFetch.js를 만들어서 기본 fetch 코드를 넣고, 각 컴포넌트js에 useFetch.js를 불러와 매개변수로 url을 붙여 useEffect로 처리하도록 설정했다.
4.1 UPDATE
UPDATE를 사용해서 단어 기본설정 변경하기 => PUT 메소드 사용
function onCheck() {
fetch(`http://localhost:3001/words/${word.id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...word,
isDone: !isDone,
}),
}).then((res) => {
if (res.ok) {
setIsDone(!isDone);
}
});
}학습이 완료된 단어는 흐림처림을 할 수 있도록 할 것이다.
json.db의 디폴트 word는 isDone : false로 작성되어 있다. 이를 true로 변경해 학습이 완료된 단어와 그렇지 않은 단어를 구분했다.
새로운 정보를 만드는 것이 아니라, 기존의 내용을 수정하는 것으로 fetch를 통해 단어정보를 불러와 method PUT을 사용하자.
4.2 CREATE
CREATE를 사용해서 새로운 단어, 새로운 날짜를 추가하기 => POST 메소드 사용
function onSubmit(e) {
e.preventDefault();
if (!isLoading) {
setIsLoading(true);
fetch(`http://localhost:3001/words/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
day: dayRef.current.value,
eng: engRef.current.value,
kor: korRef.current.value,
isDone: false,
}),
}).then((res) => {
if (res.ok) {
alert('생성이 완료되었습니다.');
navigate(`/day/${dayRef.current.value}`);
setIsLoading(false);
}
});
}
}버튼이나 submit을 제출할 때, dom에 접근할 수 있는 useRef()를 사용해서 화면에 입력한 값을 보내준다. 이후 useNavigate()를 사용해 원하는 경로로 보내준다.
- useNavigate()
: 페이지 이동
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
if (res.ok) {
navigate(`/day/${dayRef.current.value}`);
}위는 res가 ok라면 /day/${dayRef.current.value}페이지로 이동하도록 작성하였다. 이처럼 특정한 이벤트가 실행됐을때 useNavigate()를 사용하면 편리하게 페이지 이동이 가능하다.
react-router-dom으로부터 useNavigate를 import해오는 것을 잊지말자.
마무리
json-server를 사용해 배포는 쉽지 않았지만 CRUD 학습을 할 수 있었고, 기본적인 react-hook을 학습할 수 있었다. 단기간에 복습이나 기초를 다지기 좋은 프로젝트였다.
