📌 전체 게시글 목록

첫 번째 코드React 18import React from 'react';import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(안녕 리액트 !); React 18 이상: React 18에서는 새로운 Root API인 ReactDOM.createRoot를 사용합니다.Concurrent Mode 지원: 이 새로운 API는 React의 Concurrent Mode와 더 나은 성능 최적화를 지원합니다.사용법createRoot를 사용하여 root를 생성합니다.생성된 root에서 render 메서드를 호출합니다. 두 번째 코드React 17import Reac..

📚 then()앞선 비동기 작업이 완료되면 등록된 콜백을 실행해준다.then()은 Promise를 리턴한다1. fetch 함수가 url로 request를 보내면 Promise Pending 상태를 리턴.2. Promise가 Fulfilled 상태가 되면 Promise의 결과값을 콜백의 첫번째 파라미터로 전달한다.3. 만약, 콜백이 Promise를 리턴하면 then 메소드가 리턴한 Promise도 동일한 상태와 결과 값을 갖게 된다.4. 콜백이 Promise가 아닌 평범한 값을 리턴하면, then 메소드가 리턴한 Promise는 FulFilled 상태가 되고 리턴값을 결과값으로 갖게된다.  then() 메소드의 흐름한 줄로 정리Promise가 Fulfilled 상태가 되면(비동기 작업이 끝나면) 다음 작..

콜백(Callback)이란?어떤 함수의 아규먼트로 전달되는 함수를 콜백 또는 콜백 함수라고 부릅니다.자바스크립트나 자바스크립트 라이브러리는 다양한 비동기 함수를 제공해 준다.제공되는 비동기 함수에 콜백을 넘겨주기만 하면 비동기 프로그램을 구현할 수 있다.

👩🏻‍💻 await 함수Promise의 성공 결과 값을 받아오려면 함수 앞에 await을 사용한다async은 함수나, 파일 module의 최상위 레벨에서만 사용할 수 있다. 여기서 module은 ES6 모듈을 의미👩🏻‍💻 await의 역할fetch함수는 Promise 객체를 리턴한다.fetch 앞에 await문이 있으면 Promise가 Fulfilled 상태가 될 때까지 기다린다.Promise는 세 가지 상태를 갖는다. Pending (미결정) : 비동기 작업을 기다리고 있을 때 Fulfilled (성공) : 비동기 작업을 성공적으로 끝났을 때 Rejected (실패) : 비동기 작업이 실패했을 때비동기 작업이 완료되면 Promise가 작업 결과를 알려준다. 이는, await로 활용한다.🔒 ..

💡 fetch란 ?Promise 객체를 리턴한다fetch()는 console.log()보다 훨씬 오래 걸리기 때문에 printEmployees() 호출 아래 더 많은 console.log()문이 있었어도 그 출력문들이 모두 실행되고 나서 function() 안으로 돌아갑니다.💡 Promise 란 ?비동기 작업이 완료되면 값을 알려주는 객체작업이 완료되면 값을 알려줄 것을 '약속'함fetch는 오래 걸리는 작업이기 때문에 결과값을 바로 돌려줄 수는 없으니까, 일단 Promise를 돌려주고 나중에 작업이 완료되면 결과값을 Promise에 채워 넣어줌  Promise가 나오기 전 콜백 기반getEmployees((response) => { json((response, (data)) => { cons..

✅ || 연산자|| 연산자는 좌측의 값이 falsy 값(0, "", false, null, undefined, NaN)일 때 우측의 값을 반환합니다. 따라서 user가 빈 문자열("")이므로 currentUser1은 "Anonymous"가 됩니다. ✅ ?? 연산자?? 연산자는 좌측의 값이 null 또는 undefined일 때만 우측의 값을 반환합니다.