React (3) 썸네일형 리스트형 JSX TO JS 변환 구현 서론 babel.js가 하는일 중에 하나가 설탕구문이 들어가는 내용을 브라우져가 알 수 있는 내용로 변경하는 것이다. 그럴려면 가장 먼저 설탕구문이 있을 수 있는 스크립트를 중단 시키고, 바꾸고, 다시 실행하는 것이 순서일 것이다. jsx는 설탕구문이기에 그러한 과정이 필요하다. 조사 스크립트 중단을 알아보기 위해 구글에 prevent tag script 라고 검색을 하니 첫페이지에 적당한 것이 나왔다. https://medium.com/snips-ai/how-to-block-third-party-scripts-with-a-few-lines-of-javascript-f0b08b9c4c0 위 소스를 HTML파일의 헤더부분에 삽입을 하니 그 이후로 나오는 태그들은 전부 소실 되었다 (body조차) 물론 만능.. React virutal-DOM 구조 및 구현해보기. 가상돔의 실체는 무엇인가 대해서 조사해보자. Virtual DOM은 무엇인가요? Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다. "가상"적인 표현은 리엑트 객체내에 저장하든지, 아니면 DOM에 저장될지 둘중 하나일 것이다. React.render를 하기 전과 후를 Object.keys로 비교해본다. 결과: 언더바(_)로 시작하는 네가지가 $0의 새 구성원이 된것을 확인 할 수 있다. c98pj33.. 하는 부분은 첫 render를 할 때마다 랜덤하게 부여되고 재 호출시에는 유지되는 결과로 볼 때. 저들중 한놈, "가상"적인 표현을 저장.. useState 동작실험 및 구현 class 타입인 React.Component의 this.setState 와는 다르게, 동작원리를 초심자 입장에서는 직관적으로 유추하기가 힘들다. 일단 아래의 코드를 살펴보자. (공식문서의 내용) import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 공식문서를 살펴보면 useState(0)가 각각 count, setCount 에 변수와 함수를 할당한다고 하는데, useState가 어떻게 .. 이전 1 다음
