리액트 외부 api 사용

react

avocadooooo 2022. 1. 26. 22:58

javascript api 중에 fetch()가 있음

fetch 관련 개념

1. promise

자바스크립트 Promise 쉽게 이해하기

(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법

joshua1988.github.io

2. 비동기

자바스크립트 비동기 처리와 콜백 함수

(중급) 중급 자바스크립트 개발자가 되기 위한 자바스크립트 비동기 처리와 콜백 함수 이해하기. 콜백 지옥과 해결 방법 등

joshua1988.github.io

3. async, await 사용

await를 쓰기 위해서는 상위함수에 async가 붙어있어야함

자바스크립트 async와 await

(중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법

joshua1988.github.io

사용방법 무료 강의

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 - 인프런 | 학습 페이지

지식을 나누면 반드시 나에게 돌아옵니다. 인프런을 통해 나의 지식에 가치를 부여하세요....

www.inflearn.com

console.log는 앱이 ui를 새로 그릴 때마다 찍힌다.

예를 들면 고양이 짤방 앱에서 검색어를 입력하고 검색을 누를때 x번째 숫자와 메인 고양이 사진이 바뀐다

=> ui를 새로 그린다.

즉, 리액트 컴포넌트안에 있는 코드는 기본적으로 ui가 업데이트 될 때마다 계속 불린다.

//setInitialCat(); 이렇게만 쓰면 계속 불러온다.
React.useEffect(() => {
  setInitialCat();
}, []);

[]가 있는 이유 : 두번째 인자를 통해 함수가 불리는 순간을 제한 시킬 수 있음
-> 빈 배열은 비어있으면 컴포넌트가 맨 처음에 나타날때만 불린다.
-> [count]는 count 변수가 변경될 때마다 함수가 호출된다.