React (axios,json-server) CRUD
- Create
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const onSubmitHandler = async(el) => {
el.preventDefault()
const lists = {
title,
content,
}
await axios.post("http://localhost:3001/lists", lists);
fetchLists();
};
input에서 value값을 각각 title content를 onchange로 받아서 set으로 저장 값을 onSubmitHandler함수안에 lists안에 저장 axios로 post해주고 다시 get을 받아온다.
- Read
const [lists,SetLists] = useState([]);
const fetchLists = async() => {
const {data} = await axios.get("http://localhost:3001/lists")
SetLists(data);
}
useEffect(() => {
fetchLists();
}, []);
get 받아온 data를 setLists에 저장 useEffect로 한번만 받아오게 실행
- Delete
const onClickDeleteButtonHandler = (listId) => {
axios.delete(`http://localhost:3001/lists/${listId}`);
fetchLists();
};
lists.map을 해줘서 하나하나의 데이터를 뿌려주고 해당 글의 id값을 받아서 json-server에서 delete해준다 그리고 다시 get 받아온다.
Problem
aixos post 받아서 저장 할때 useState를 이용해서 아래와같이 했을때 문제가 발생
// 새로운 저장소를 만들고
const [list,setList] = useState({
id,
title,
constent,
})
const onSubmitHandler = async() => {
const newList = list
await axios.post("http://localhost:3001/lists");
fetchLists();
};이때 id만 저장 되고 title과 content만 저장이되었다.
Try
list의 값을 console로 찍어보고 input안에 onchange가 잘들어오는지 확인해 봤는데 안되었다.그래서 전에 했었던 todolist에서 다시 확인해서 다시 머리속에 띵하면서 전에 하던 방법이 떠올랐다.
Solution
useState로 값을 받지 않고 함수안에서 newList에서 객체로 title과 content만 받아서 저장해줬으면 되었다.
Learn
분명히 전에 해봤던 투두리스트 였지만 axios랑 json-server가 너무 생소하기도 하고 많이 사용하지 않아서 개인프로젝트를 많이 해봐야겠다는 생각과 docs를 많이 보면서 익숙할때까지 공부하는것 javascript를 너무 얕게 공부한거 같다는 생각을 해서 투두리스트에 필요한 javascript 공부를 한거 같다.아직 더많이 더열심히 해야할거 같다.누군가에게 설명하는게 해봐서 설명을 하는거랑 완전히 이해하고 설명을 하는거는 천지 차이인거 같다.
