본문 바로가기

전체 글57

리액트 주말반 네번째 수업 (React Virtual DOM에 대하여) 🔹 1. DOM이란?DOM(Document Object Model)은 브라우저가 HTML 문서를 객체로 표현한 구조입니다. 🔹 2. Virtual DOM이란?Virtual DOM은 실제 DOM의 가벼운 자바스크립트 객체 복제본입니다.React는 UI 변경이 필요할 때 실제 DOM을 직접 수정하지 않고, 먼저 Virtual DOM에서 그 변경을 시뮬레이션합니다. 🔹 3. Virtual DOM 작동 방식초기 렌더링: 컴포넌트가 처음 렌더링될 때, React는 Virtual DOM을 생성하고 실제 DOM에 반영합니다.업데이트 발생 (setState, props 변경 등): 변경이 생기면 React는 새로운 Virtual DOM을 생성합니다. 이전 Virtual DOM과 비교(diffing)하여 어떤.. 2025. 7. 20.
리액트 주말반 세번째 수업 function App() { const [mode, setMode] = useState("WELCOME"); const [id, setId] = useState(null); const [nextId, setNextId] = useState(4); const [topics, setTopics] = useState([ { id: 1, title: "html", body: "html is ..." }, { id: 2, title: "css", body: "css is ..." }, { id: 3, title: "javascript", body: "javascript is ..." }, ]); let content = null; if (mode === "WELCOME") { .. 2025. 7. 19.
자바스크립트 비동기 통신 (promise, async, await) 첫번째 목표2초 후 원격 API 요청응답 데이터를 받아서 alert 등으로 표시예제: fetch로 실제 데이터 요청 + setTimeout으로 지연 ✅ 실행 흐름:버튼누르기()가 실행되면 await 프로미스로 2초 대기2초 후 fetch로 원격 데이터 요청응답을 받아 alert으로 결과 출력📌 결과 예시 (2초 후 alert):2초 후 데이터 도착:{ "userId": 1, "id": 1, "title": "sunt aut facere...", "body": "quia et suscipit..."} 🔧 추가 팁실제 프로젝트에서는 fetch 요청 전에도 로딩중... UI 표시를 넣는 게 UX에 좋아요.setTimeout 없이도 원격 요청 자체가 느리기 때문에 await fetch(...)만 써.. 2025. 7. 15.
리액트 주말반 두번째 수업 두번째 수업의 주제는 State 입니다.function App() { const mode = 'WELCOME'; // 일반적인 방법으로 변수 선언 및 할당 const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ] let content = null; if(mode === 'WELCOME') { content = } else if(mode === 'READ') { content = } return ( { mode .. 2025. 7. 13.

티스토리툴바