FrontEnd/React 심화

[React] Async & Await란?

1. Async & Await란? React에서 비동기 처리를 할때 Promise를 사용하지만 Promise의 단점을 보완하기 위해 ES7에서 async와 await라는 키워드가 추가 되었습니다. 위 키워드를 사용하면 비동기 코드를 마치 동기 코드 처럼 보이게 작성할 수가 있게 되었습니다. 2. Async 함수 async function() { return "id" } const users = async() => { return "id" } // 결과는 같습니다. 비동기 함수를 만들기 위해서는 단순하게 함수 앞에 async를 붙여서 일반 함수를 async 함수로 만들면 됩니다. 사실 위 함수를 실행시키게 되면 단순히 일반 함수처럼 값을 반환하는 것이 아니라 async()가 Fulfiled Promise를..

[React] Promise란?

1. Promise란? React에서 Promise는 비동기 처리에 활용되는 객체입니다. Promise는 주로 웹 서비스를 구현할 떄 원활한 데이터 통신을 위해 활용됩니다. 웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용됩니다. 즉, Promise 객체는 비동기 로직을 마치 동기처럼 사용할 수 있는 기능을 가집니다. 예를 들어 비동기 로직인 A, B, C 로직이 있다고 했을때 이를 Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 A, B, C 순서대로 출력을 시킬 수 있습니다. 2. Promise의 상태 Promise의 상태는 아래의 3가지 상태와 같습니다. Pending(대..