WINK-(Web & App)/React.js 스터디 (95) 썸네일형 리스트형 [2024 React.js 스터디] 류상우 #4주차 01. 리액트는 어쩌다 만들어졌을까?JavaScript를 사용해 HTML로 구성한 UI를 제어할 때, 특정 DOM을 선택한 후 어떤 이벤트가 발생했을 때 변화를 주도록 설정한다.다음은 HTML과 JS로 만든 간단한 카운터이다.0 +1 -1const 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;.. [2024 React.js 스터디] 김지나 #4주차 "리액트 1~9" 01. 리액트는 어쩌다가 만들어졌을까?- 처리해야 할 이벤트, 관리해야 할 상태값, DOM이 다양해질수록 업데이트를 하는 규칙도 복잡해짐 -> Ember, Backbone, AngularJS 등의 프레임워크: 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결, 업데이트 작업 간소화- 리액트는 어떠한 상태가 바뀌었을 때, DOM을 업데이트 하는 규칙을 정하는 것이 아니라 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여주면 어떨까? 라는 아이디어에서 시작함.=> DOM을 어떻게 업데이트 해야 할지에 대한 고민을 하지 않아도 됨! 하지만 모든걸 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느려질 것 ==> Virtual DOM 사용 Virtual DOM: 브라우저에 실제로 보여지는 D.. [2024 React.js 스터디] 박지민 #4주차 "리액트 입문 1-9" 1. 리액트는 어쩌다 만들어졌을까?처리해야 할 이벤트, 관리해야 할 상태값, DOM까지 다양해지게 된다면 이에 따라 업데이트하는 규칙도 복잡 -> 업데이트 간소화 필요리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정함 X, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다는 아이디어에서 시작정말로 동적인 UI를 보여주기 위해서 모든걸 다 날려버리고 새로 만들게 된다면, 속도가 굉장히 느림 -> 리액트에서는 Virtual DOM이라는 것을 사용- Virtual DOM가상의 DOM으로, 브라우저에 실제로 보여지는 DOM X그냥 메모리에 가상으로 존재하는 DOM - 그냥 JavaScript 객체 -> 작동 성능이 실제로 브러우저에서 DOM을 보여주는 것보다.. [2024 React.js 스터디] 정호용 #4주차 "React.JS 맛보기" 1장. 리액트 입문1. 리액트는 어쩌다가 만들어 졌을까?✅ HTML/JS로 만들어진 카운터 코드를 예시로 보자면..0 +1 -1const 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 = parseInt(number... [2024 React.js 스터디] 박건민 #4주차 01. 리액트는 어쩌다 만들어졌을까?JavaScript를 사용하여 HTML 로 구성한 UI 를 제어한다면, 브라우저의 DOM Selector API 를 사용해서 특정 DOM 을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 0 +1 -1 위 html/JS 코드는 +1 버튼이 눌리면, id 가 number 인 DOM 을 선택해서 innerText 속성을 1씩 더하는 규칙이 있다.위와 같은 방식은 인터랙션이 자주 발생한다면 이벤트 처리 로직이 복잡해지고 관리하기 힘들어진다. - DOM이란?Document Object Model의 약자로, HTML요소를 JavaScript Object처럼 조작할 수 있는 Model이다.DOM의 구조는 트리구조로, 아래에 여러 구성요소.. [2024 JS 심화 프론트 스터디] 한승훈 #2주차 09. 반복문 반복문은 주어진 조건동안 블록을 반복 수행합니다. continue, break 사용 가능 *for 문 for (let i = 0; i *배열의 for ~ of 문 const array = [1, 2, 3, 4, 5] for (const e of array){} 으로 순환이 가능합니다. *딕셔너리의 for ~ in 문 const me = { name = "한승훈" age = 22 } for (const key in me){} 로 순환이 가능하다. *while 문 ()내부의 식이 참일 경우 반 while (tc *do while do { 식 }while (조건) 10. 함수 함수는 function funcName (parameters){}로 선언한다. return으로 값을 반환. *함수는 ar.. [2024 JS 심화 프론트 스터디] 류상우 #2주차 목차반복문함수HTML 요소이벤트반복문주어진 조건이 충족되는 동안 특정 작업을 반복해서 수행하는 것이다. for 문: for (변수의 선언 및 할당; 조건문; 참일 시 실행할 코드) {} 형식으로 변수를 선언 혹은 할당한 후 조건문이 참일 시 블럭 내의 코드를 실행하고 괄호 안 세 번째 요소를 실행한다. 괄호 안의 요소들은 ;로 구분한다.for (let i = 0; i 루프 제어continue: 현재 진행 중인 루프를 건너뛴다. 즉, 블럭 내의 continue 이후 코드는 실행되지 않는다.break: 반복문을 종료한다.for (let i = 0;; i++) { if (i % 3 === 0) continue; if (i > 10) break; console.log(i);}//1 2 4 5 7.. [2024 JS 심화 프론트 스터디] 김지나 #2주차 "나머지" 01. 반복문: 주어진 조건이 충족되는 동안 특정 작업을 반복해서 수행- for문괄호 안 요소들을 ;으로 구분1) 변수의 선언 및 할당 2) 종료조건 3) 참일 시 실행할 것for (변수선언&할당; 종료조건; 참일 시 실행할 것) { 실행문}for (let i = 10; i > 0; i -= 2){ console.log(i);}//예시중첩 사용 가능continue, break: 반복문에서 뭔가를 건너뛰거나 특정 조건을 충족해서 해당 반복문을 종료해야 될 때continue: 뒤에 있는 것은 해당 턴에서 실행되지 않고 넘어감break: 루프 종료- for ... of 문: 배열의 요소를 순서대로 반환for (const 상수명 of 배열) {}- for ... in문: 객체의 키들을 순서대로 반환 - whil.. 이전 1 ··· 7 8 9 10 11 12 다음
