axios

node.js 와 브라우저를 위한 Promise 기반의 http 클라이언트 즉 http를 이용해 서버와 통신하기 위해 사용되는 라이브러리

설치법

yarn add axios

get 사용법

우선 학습을 위해 db.json으로 데이터 만들어 놓기(테스트용)
실제로 할땐 만들 필요 없이 가져오면 됨

1. 해당 파일에서 데이터를 사용해야하기 때문에 async 와 await로 데이터를 가져와 사용할 수 있게 만듦
   axios.get('json 데이터 주소')로 가져옴
   
   
2. useEffect로 화면이 첫 렌더링 될때 가져온 데이터를 바로 실행시킴
   
   
3. axios.get으로 가져온 데이터를 state에 담아서 사용 (setTodos로 todos에 담음) 초기값은 값이 없다는 뜻으로 null
   
   
4. 데이터가 담긴 state를 map 과 같은 메소드로 화면에 뿌려줌 todos 뒤에 ? 을 붙여준 이유는 최초 렌더링 될때 데이터가 불러와지기 전에 map함수가 실행됨 따라서 map의 실행내용이 없을 수 있기 때문에 오류가 날 수 있음. 따라서 에러를 방지하기 위해 사용

post 사용법

1. 우선 input의 value로 값을 넣을 스테이트를 만든뒤 그 state를 넣어줌
   
   
2. 내용이 바뀌고 클릭이 될때 마다 작성한 내용이 Json데이터에 들어가게 setState { 키값 : e.target.value } 식으로 넣어줌 객체 내부에 준 이유는 데이터가 객체 형태이고 스테이트를 객체 형태로 만들었기 때문
   그리고 지정해 놓을 함수를 실행
   
   
3. 함수를 지정한뒤 역시 데이터를 사용해야하기 때문에 async를 사용하고 데이터 URL뒤에 넣어줄 값을 입력 다만 이렇게만 넣으면 항상 새로고침을 해줘야 화면에 갱신이 되기 때문에 setState를 활용해 데이터를 넣자마자 리렌더링 되게 만들어줌
   
   

delete 사용법

1. 함수를 지정하고 async 사용한 뒤 백틱으로 URL뒤에 받아올 id 값을 넣어줌
   
   
2. 새로고침 없이 바로 리렌더링을 하기 위해 역시 setState 내부에 filter를 돌려 클릭한 id 값이 아닌 것들만 반환시킴

update 사용법

1. 타겟할 id와 내용을 담을 state 두개를 만들어 준다
   
   
2. 함수를 선언한 뒤 async 사용 후 백틱으로 URL뒤에 타겟할 id가 담길 state를 넣어준뒤 데이터에서 바꿀 내용을 객체형태로 담아준다. 밸류값은 내용이 담길 state 이것도 역시 리렌더링이 되도록 setState 내부에 map 함수로 target한 id가 state로 받은 아이디가 아니라면 객체 형태로 내용을 반환하게 해준다. 일치 연산자(===)가 아닌 동등 연산자(==)로 해준 이유는 id의 형태가 다르기 때문
   
   
3. onClick시 위에서 선언한 함수를 실행시켜준다. state로 이미 내용을 관리하고 있기 때문에 함수에서 인자를 받을 필요X
   
   
4. 다만 state는 key값이 자동으로 갱신되지 않기 때문에 새로 데이터를 불러오게끔 map을 돌리기 보다는 위에 설정한 fecthTodo를 실행시켜 데이터를 새로 불러오는게 나음