코테이토 동아리/[코테이토]React 스터디 5기
14장. 외부 API를 연동하여 뉴스 뷰어 만들기
Xerath(제라스)
2023. 2. 10. 14:41
728x90
반응형
- 웹 애플리케이션에서는 서버쪽 데이터가 필요할 때 Ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신함.
- JS에서는 비동기 작업을 할 때 가장 흔히 사용하는 방법이 콜백 함수를 사용하는 것임.
- Promise는 콜백 지옥을 형성하지 않게 하는 방안으로 ES6에 도입된 기능임.
-> Promise 객체를 생성하고 이를 반환하는 함수에 .then으로 콜백 요청 가능
- async/await는 Promise를 더 쉽게 사용할 수 있게 해주는 ES8 문법임.
-> 함수의 앞부분에 async 키워드를 추가하고 해당 함수 내부에 Promise의 앞부분에 await 키워드를 사용함.
(이러면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있음.)
- .prettierrc 예시
{
"singleQuote":true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
}
- VSC에서 파일 자동 불러오기 기능
//jsconfig.json
{
"compilerOptions": {
"target": "es6"
}
}
- useEffect에 등록하는 함수에 async를 붙이면 안된.(∵ useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문임.)
- useEffect 내부에서 async/await를 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해 주어야 함.
-usePromise를 사용하면 Promise의 대기 , 완료 결과, 실패 결과에 대한 상태를 관리할 수 있다.
728x90
반응형