#56. sweetalert2 Basic 사용하기
sweetalert2 패키지는 다양한 디자인과 기능의 알림창을 지원한다. 기본 자바스크립트 alert()와 같이 사용자에게 필요한 정보를 알림창으로 표시한다.
sweetalert2는 비동기적으로 동작한다. 비동기적으로 실행되는 sweetalert2 함수를 동기적으로 사용하기 위해 프로미스의 then 함수를 사용한다. then 함수를 사용해 Swal.fire() 함수의 결과값(result)이 반환됐을 때 alert() 함수를 실행한다. Swal.fire() 함수 알림창에서 확인 버튼을 누를시 result 값이 true로 반환된다.
⭐️ 프로미스는, 비동기 함수를 동기적으로 사용할 수 있도록 하는 개념이다.
#57. sweetalert2 position 사용하기
sweetalert2는 알림 창의 표시 방식과 구성 요소들을 원하는 형태로 변경할 수 있는 옵션을 제공한다. 옵션 중 position은 알림창의 표시 위치를 결정한다.
position은 알림 창의 표시 위치를 정하는 옵션이다. 수직으로는 top, center, bottom이 있고, 수평으로는 -start, (none), -end가 있다. (none)은 아무것도 안 붙은 가운데 이다.
#58. sweetalert2 confirm 사용하기
confirmButtonText는 확인 버튼, cancelButtonText는 취소 버튼에 표시될 텍스트 이다. showCancelButton: true로 했기 때문에 삭제를 선택했다면, result.value 값이 true로 반환된다. 그럼 그때 then을 이용하여 삭제를 진행하면 된다.#59. fetch get 호출하기
웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고 받는다. GET과 POST를 가장 많이 사용한다. GET은 데이터를 조회해 가져와 사용하는 것이다. 주로 데이터 조회나 검색 등의 기능에 사용된다.
fetch를 사용하여 비동기 통신을 구현할 수 있다. fetch함수에 별도의 http 메소드 설정이 없다면, get 방식으로 호출한다. fetch 함수의 비동기적 특성 때문에 async와 await를 추가하였다. 비동기 함수를 실행하는 함수에 async를 추가하고 동기적으로 처리 되어야 할 함수 구문 앞에 await를 추가한다.
#60. fetch post 호출하기
POST는 서버의 상태나 데이터를 변경하는 등의 수행 작업에 사용된다. POST 방식은 http body에 데이터를 넣어 전달한다.
method: 'POST'로 POST 방식인 것을 알려주고, header 부분에 어떠한 형태의 데이터를 사용할지 지정하기 위해 headers:{ 'Contetn-Type': }을 지정하였다. json 형태의 데이터를 사용하기 위해 application/json을 할당한다.
#61. axios get 사용하기
axios도 fetch와 마찬가지로 비동기 통신을 지원한다. 별도로 설치한 후 임포트해 사용한다.
axios.get('호출 url') 문법으로 get방식의 http 호출을 한다. url 호출이 완료된 뒤, then 함수가 실행된다. response와 호출된 변수명 사이에 data를 넣으면 변수를 사용할 수 있다.
#62. axios post 사용하기
axios post 방식은 get과 거의 비슷하다. 다른 점은 post의 파라미터로 json과 같은 형태의 데이터를 넣고 http body에 담아 url 호출할 수 있다.
이렇게 사용하면 된다.
#63. 콜백 함수 사용하기
자바스크립트는 비동기적으로 동작하기 때문에 콜백 함수를 이용하면 특정 코드에 순서를 정해 원하는 시점에 실행할 수 있다.
이 코드의 실행 결과는 1, return1: 2, 2, return2: 4 이다. 1을 logPrint의 param으로 넣어 함수를 호출했고, 2를 반환할 때까지 기다렸다가 다시 logPrint 함수를 호출했다. 하지만 콜백 함수가 증가할수록 함수 안에 또 다른 함수를 계속 추가해야 한다. 콜백 함수를 여러 번 사용할수록 코드가 더 지저분해진다는 단점이 있다.
#64. Promise then 사용하기
promise는 콜백 함수와 같이 비동기적으로 동작하는 코드를 동기적으로 구현할 때 사용한다. promise를 사용하면 콜백 함수와 달리, 코드 가독성을 높일 수 있고 예외 처리도 쉽게 할 수 있다.
- promise에는 대기, 이행, 거부의 개념이 있다. 대기 상태에서 이행 상태로 변할 때 then() 함수 안의 코드가 실행된다.
- 5번째 줄에서 Promise라는 객체를 생성해 promise를 사용한다. 파라미터로 하나의 함수(resolve)만 받을 경우, 이행 함수로 사용된다. timeout 함수를 실행해 1.5초 뒤 7번째 줄의 resolve 함수가 실행된다. 이때 promise는 이행 상태가 되며 10번째 줄의 then 함수가 실행된다.
- 7번째 줄의 resolve함수에서 파라미터로 전달된 결과값('react')를 result라는 파라미터로 받아 사용한다. result변수에 200을 추가해 반환하는 순간 14번째 줄의 then 함수가 실행된다.
- 12번째 줄에서 반환된 값을 파라미터로 받아 콘솔에 출력한다. 10번째 줄과 12번째 줄은 동일한 기능을 하지만 function과 화살표 함수로 구현되었다는 점이 다르다.
promise then 함수를 사용하면 코드를 콜백 함수의 계단식 복잡한 코드 형태보다 가독성 있게 구현할 수 있다.
Promise catch 사용하기
promise의 상태가 거부 상태가 됐을 때 catch 함수를 실행한다. 대기 상태의 promise에 에러가 발생해 이행으로 상태 변화를 하지 못하는 경우이다.
파라미터로 두 개의 함수를 받으면, 첫 번째 함수(resolve)는 이행 함수, 두 번째 함수(reject)는 거부 함수로 사용된다. 거부 함수 reject를 실행하면서 Error객체를 사용해 에러를 발생시켰다. 거부 함수가 실행되면, 이행 상태가 되지 못하기 때문에 then 함수는 실행되지 않는다. promise의 상태가 거부로 변하면서 catch 함수가 실행된다. 에러 정보를 출력하게 된다.
[출처 : 초보자를 위한 리액트 200제(정보문화사)]
