해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
POST Method 를 이용해 단어를 추가해보자.
CreateWord.js
단어 추가 기능 구현을 위해서 CreateWord 컴포넌트를 만든다.
CreateWord.js 를 생성한다.
App.js
Header.js
Header 에 링크 주소를 기입한다.
결과창
CreateWord.js
단어 등록 폼 CreateWord 를 만들어보자. 실제 Day 리스트를 받아서 Day 에 넣어주자.
만들어둔 Custom Hooks 이 있으므로 이것을 활용해보자. → useFetch
day를 불러와서 map 을 이용해 Day 에 day를 넣어주자.
key 는 day.id 를 넣고, value 는 day.day 를 넣는다.
결과창
day 가 Day 에 생겼다는 것을 확인할 수 있다.
저장 버튼을 누르면 창이 새로고침 된다. →
태그로 감싸져 있어서 그렇다.CreateWord.js
onSubmit 함수를 만들고 태그에 연결해보자.
e(event) 를 받아서 e.preventDefault() 를 하면, 버튼을 눌러도 창이 새로고침되지 않는다. 기본 기능을 막아준 것이다.
저장버튼을 눌렀을 때 단어와 뜻의 정보를 콘솔로 찍어보자.
input 창에 적힌 값들을 읽기 위해서 useRef 라는 Hook 을 사용해보자.
useRef 는 DOM 에 접근할 수 있도록 한다. 예를 들어 스크롤 위치를 확인하거나 포커스를 둘 때 사용한다.
3개의 Ref 를 만들었다. 영어, 한국어, day 라는 Ref 이며, 초기값은 null 이다.
각 input 태그에 Ref 를 연결해준다.
Ref 를 연결해주면 DOM 요소가 생성된 후 접근할 수 있다.
저장 버튼을 클릭하는 시점은 당연히 렌더링 결과가 DOM 에 반영된 이후다.
단어 추가에 뭔가를 입력하고 저장버튼을 눌러보자.
current 속성을 이용하면 해당 요소에 접근할 수 있고, value 는 input 에 입력된 값을 얻을 수 있다.
결과창
추가한 단어가 콘솔창에 찍힘을 확인할 수 있다.
data.json
POST 를 이용해 추가된 단어를 생성해보자.
필요한 정보가 words 에서 day, eng, kor, isDone 이다.
day, eng, kor 는 CreateWord.js 의 input 으로 입력받고, isDone 은 false 로 고정해서 저장하도록 하겠다.
CreateWord.js
Word.js 에서 PUT 했던 코드를 복사해서 수정하도록 하겠다.
Method 는 POST 로 수정한다.
http://localhost:3001/words/ 까지 입력하고 POST 를 날리면, 새로운 단어가 생성된다.
필요한 데이터는 body 에 입력한 코드다.
결과창
이렇게 매번 단어를 추가할때마다 직접 가서 확인하는 방법말고, 단어 추가가 완료되면 해당 페이지로 이동하도록 설정해보자.
useHistory 라는 것을 사용해보자.
useHistory 는 리액트 라우터에서 지원하는 기능이다.
useHistory 로 생성한 history 에 주소를 push 해주면, 해당 페이지로 이동한다.
<Link to> 처럼 <a> 태그를 사용하지 않고 페이지를 전환할 때 유용하게 사용할 수 있다.
결과창
매번 단어를 추가할때마다 직접 가서 확인하는 방법말고, 단어 추가가 완료되면 해당 페이지로 이동하도록 설정했다.
확인 버튼을 누르면, 바로 day/2 페이지로 이동하면서 mouse 단어 추가되었다. → 단어 생성 완료
CreateDay.js 생성
날짜를 늘리는 작업을 해보자. → 마찬가지로 CreateDay.js 를 생성하고 링크를 연결주면 된다.
App.js
태그로 CreateDay 연결Header.js
CreateDay.js
결과창
CreateDay.js
현재 몇일까지 있는지 표시해보자.
결과창
현재 일수가 추가되었고, Day 추가 버튼을 누르면 추가되는 기능을 구현해보자.
단어 추가 (CreateWord.js) 와 똑같은 로직이기 때문에 가지고 와서 사용하겠다.
CreateDay.js
현재 일수가 추가되었고, Day 추가 버튼을 누르면 추가되는 기능을 구현했다.
단어 추가 (CreateWord.js) 와 똑같은 로직이기 때문에 가지고 와서 사용하면 된다.
결과창
Day 4 가 생성되었다.
data.json
data.json 에 Day 4 가 생성되었음을 알 수 있다.
결과창
Day 4 에 단어를 넣어보자.
단어와 날짜 생성 기능을 추가했다.
