WINK-(Web & App)/React.js 스터디 (77) 썸네일형 리스트형 [2024 여름방학 React.js study] 이가인 #3주차 DOM이란?, React 라이브러리의 등장DOM(Document Object Model)은 HTML, XML 문서의 구조화된 표현을 의미하며, 프로그래밍 언어가 이 구조에 접근하고 조작할 수 있는 방법을 제공하는 모델이다. 문서의 구조 표현: 웹 페이지의 HTML 구조를 트리(tree) 형태로 표현합니다. 트리의 각 노드(node)는 HTML 태그 하나하나를 나타프로그래밍 인터페이스: 이 구조에 접근하고 수정할 수 있는 방법을 제공하여, 자바스크립트 같은 언어를 통해 웹 페이지의 내용을 변경하거나, 요소를 추가/삭제할 수 있다. // html 문서 안녕하세요 이것은 예시 문서입니다. // dom 트리Document├── html ├── body ├── h1 .. [2024 여름방학 React.js study] 이가인 #2주차 1. js 최신 문법 2. 모듈화 구문 3. 비동기 처리1. js 최신 문법템플릿 리터럴 - 백틱(`)let a ='hi' ;let message = a + '안녕'; //백틱 사용 : 변수를 문자열 안에 바로 연결 가능let message =`${a} 안녕`; // 'hi 안녕'구조 분해 문법 (Destructuring)// 배열에 있는걸 변수에 넣고 싶을 때let arr= ['apple',10]let [fruit, myNum] = arr;// let fruit =arr[0]; 보다 훨씬 쉬움// 객체에 있는걸 변수에 넣고 싶을 때let josh = {skill : 'js'.age:21 }let [skill, age] = josh;// var mySkill = josh.skill; 보다 쉬움//.. [2024 여름방학 React.js 스터디] 이종윤 #3주차 DOM(Document Object Model)이란: 문서 객체 모델이라는 뜻, 스크립트언어로 html문서를 제어할 수 있도록 웹 문서를 객체화 한 것이다.: 즉 html문서에 있는 tree구조라는 모양으로 태그와 태그안에 텍스트와 속성들을 모두 객체화 해서 js에서 편집 할 수 있도록 만들어주는 것이다.이렇게...리액트가 만들어진 이유원래 JavaScript를 사용하여 HTML 로 구성한 UI 를 제어하기 위해서는 브라우저의 DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤 특정한 이벤트가 발생하면 변화를 주도록 설정해야한다.그런데 이렇게 dom을 하나하나 찝어가면서 업데이트를 하다가 처리해야 할 이벤트도 다양해지고, 관리해야 할 상태값도 다양해지고, DOM 도 다양해지게 된다면, .. [2024 여름방학 React.js 스터디] 이정욱 #3주차 리액트 다시 re act 해보자 그전에 리액트를 엄청 간단하게 배워본적은 있지만 이번 방학에 리액트를 좀 공부해보고 싶은 마음이 생겨서공부를 하기로 결심했다.이번 스터디에서는 벨로퍼트와 함께 하는 모던 리액트라는 교재로 스터디를 한다.여기서 나오는 용어나 정의에 관련한 부분은 리액트 공식 문서를 참고하기로 했다.https://react.dev/ ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by in.. [2024 여름방학 React.js 스터디] 강보경 #3주차 리액트사용자 인터페이스를 만들기 위한 JavaScript 라이브러리컴포넌트 기반으로 되어 있어 재사용성이 높고, 상태 관리를 통해 동적인 UI를 쉽게 만들 수 있다.업데이트에 대한 고민 없이 처음부터 모든 걸 새로 만들어 보여주려 만들었고 이 때의 문제인 느린 속도를 해결하기 위해 Virtual DOM을 이용하여 작동 성능이 빨라졌다. 컴포넌트독립적인 UI 단위로 재사용이 가능하며 각각의 컴포넌트는 고유한 상태와 라이프사이클을 가진다. JSX리액트에서 생김새를 정의할 때 사용하는 문법return 안녕하세요; 태그를 꼭 닫아야 함 (ex: )태그와 태그 사이에 내용이 들어가지 않을 때는 Self Closing 태그 사용두 개 이상의 태그는 무조건 하나의 태그로 감싸기 -> 단순히 감싸기 위한 불필요한 .. [2024 여름방학 React.js 스터디] 김태일 #3주차 "리액트 입문" 01. 리액트가 만들어진 배경- 처리해야 할 이벤트, 상태값, DOM이 다양해질때 코드가 복잡해지는 것을 해결하기 위함- 어떠한 상태가 바뀔 때, 업데이트를 작업하는것이 아닌 모든걸 새로 만든다는 발상에서 출발- Virtual DOM을 통해 실현 (업데이트에 대한 고민해결 + 빠른 성능) 01-1 Virtual DOM- 브라우저에 실제로 보여지지 않는 가상의 DOM- 업데이트가 필요한 곳의 UI를 Virtual DOM 을 통해서 렌더링- 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치 02. 작업환경 준비- Node.js : 자바스크립트 런타임 (Webpack, Babel 등의 도구들을 사용하기위해 설치)- Yarn : 개선된 버전의 npm .. [2024 여름방학 React.js 스터디] 김민서 #3주차 리액트 Virtual DOM을 사용해 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다 npx create-react-app begin-reactcd begin-reactnpm start 리액트 컴포넌트 만들기 // Hello.jsimport React from 'react'; // 리액트 불러오기function Hello() { return 안녕하세요}export default Hello; // 컴포넌트 내보내기 (다른 컴포넌트에서 불러오기 가능)// App.jsimport React from 'react';import Hello from './Hello';function App() { return ( );}export default Ap.. [2024 여름방학 React.js 스터디] 백채린 #3주차 1장. 리액트 입문 1. 리액트는 어쩌다 만들어졌을까? HTML/JS로 만들어진 카운터 예시// index.html0 +1 -1// index.jsconst number = document.getElementById('number');const increase = document.getElementById('increase');const decrease = document.getElementById('decrease');increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1;};decrease.onclick = () => { const current = parse.. 이전 1 2 3 4 5 6 ··· 10 다음
