[AI딥페이크] 3. 프론트엔드 프로그래밍 언어 및 개발 환경 구축 (React)

console.log("1. (동기) 코드를 시작합니다."); // '2. (비동기)' 작업을 5초뒤에 실행하라고 '예약'함 setTimeout(() => { console.log("2. (비동기) 5초가 지났습니다. 작업 완료!"); }, 5000); // 5초 console.log("3. (동기) 코드가 끝났습니다.");

// 1. 함수 선언 (async 키워드 사용) async function fetchData() { console.log("2. (비동기) API 요청을 시작합니다..."); try { // await: fetch(API 요청)가 끝날 때까지 '이 함수 안에서만' 기다림 const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); // await: response.json() 변환이 끝날 때까지 기다림 const data = await response.json(); console.log("3. (비동기) 데이터를 성공적으로 가져왔습니다:", data); } catch (error) { console.error("오류 발생:", error); } console.log("4. (비동기) fetchData 함수가 끝났습니다."); }

// --- 실행 --- console.log("1. (동기) 코드를 시작합니다."); fetchData(); console.log("5. (동기) 코드가 끝났습니다.");

const element = <h1>Hello</h1>;

import './App.css' import MyButton from './MyButton'; function App() { return ( <div> <h1>Props와 State 실습</h1> {/* 'title'은 이제 "초기 텍스트"라는 '초기값'을 전달하는 용도로만 사용됩니다. */} <MyButton title="초기 텍스트 (클릭해보세요)" /> <MyButton title="다른 버튼 (클릭해보세요)" /> </div> ); } export default App;

import { useState } from "react"; // 1. props의 '타입'을 정의합니다. (title은 string 타입) interface MyButtonProps { title: string; } // 2. 'props' 객체를 매개변수 자리에서 바로 '비구조화' function MyButton({ title }: MyButtonProps) { const [buttonText, setButtonText] = useState(title); const handleClick = () => { setButtonText("클릭! (State 변경됨)"); }; // 3. 'title' 변수로 바로 접근 return ( <button onClick={handleClick}> {buttonText} </button> ); } export default MyButton;