JavaScript45 [리액트 숙련주차] 2-11 DOM과 Virtual DOM 2-11 DOM과 Virtual DOM 1. 가상돔이란? - 리액트나 뷰는 가상돔을 사용해서 원하는 화면을 브라우저에 그려줌 - 자체적으로 효율적인 알고리즘을 사용하여 그려주기 때문에 속도가 어마어마함 2. DOM (Document Object Model) - 브라우저는 수많은 컴포넌트로 구성되어있음 -> 문서(document) - 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 함 => DOM은 엘리먼트를 tree형태(DOM tree)로 표현한 것 - 트리의 요소 하나하나를 노드라고 부르고, 해당 노드에 접근과 제어할 수 있는 API를 제공함 - API : HTML요소에 접근해서 수정할 수 있는 함수 // id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘. document.g.. 2023. 6. 30. [리액트 숙련주차] 2-3~9 React Hooks 2-3 useState 1. useState란? const [state, setState] = useState(초기값); - 가장 기본적인 hook - 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 - 카운터, Todolist 2. 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return currentNumber + 1 }); - 차이점 : 배치 업데이트 (state 파악하는 방법) - 함수형은 동시에 명령을 내리면 명령을 모아 순차적으로 각각 한번씩 실행해줌 - 배치(b.. 2023. 6. 29. [리액트 숙련주차] 2-1~2 Styled Components 2-1 Styled Components (개요) 1. Css-in-JS 방식 - JS 코드 -> CSS 코드 - JS코드로 컴포넌트를 꾸미는 방식 - Styled Components 패키지 사용 2. 패키지란? - 외부에서 가져와서 사용할 수 있는 라이브러리 - 3rd party - vsCode extension -> "vscode-styled-components" 설치 -> 터미널에서 "yarn add styled-compone nts" 하여 설치 3. Styled Components 사용 - 꾸미고자 하는 컴포넌트를 Styled Component 방식으로 만들고, 스타일 코드 작성하는 방식으로 사용 // src/App.js import React from "react"; // styled-compon.. 2023. 6. 29. [과제] Lv.1 투두리스트 (React, JavaScript) - Chapter 3 과제 안내 💡 Goal : My Todo List 만들기 지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다. 이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨ 학습 과제를 끝내고 나면 할 수 있어요! 컴포넌트와 리액트 훅 요소를 다룰 수 있어요. 이벤트를 관리할 수 있어요. vercel을 이용해 리액트 사이트를 배포할 수 있어요. ⚙ features : 구현해야 할 기능이에요. UI 구현하기 Todo 추가 하기 Todo 삭제 하기 (화) 17:00까지 완료) Todo 완료 상태 변경하기 (완료 ↔ 진행중) (수)까지 17:00완료) 📌 Requirement : 과제에 요구되는 사항이에요. 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 .. 2023. 6. 27. 이전 1 2 3 4 5 6 7 ··· 12 다음
