DOM 3

[React] 리액트 버전 18

😭 Automatic Batching앞에서 배운 것처럼 리액트 컴포넌트는 상태가 업데이트될 때마다 재렌더링이 이뤄지기 때문에, 함수 컴포넌트에서 각각의 스테이트가 업데이트될 때마다 재렌더링이 발생유즈 스테이트 훅을 사용해서 선언한 각 스테이트들의 set 함수를 거의 동시에 호출하더라도 호출된 횟수만큼 재렌더링이 발생이러한 문제를 해결하기 위해서 여러 상태의 업데이트가 동시에 발생하면 이 작업들을 묶어서 한번에 처리하는 것이 배칭배칭은 컴퓨터 공학에서 여러 가지 작업을 한 번에 처리한다는 의미를 갖고 있음리액트에서의 배칭은 여러 상태의 업데이트 작업을 한 번에 묶어서 처리하는 것이라고 이해하면 됨기존 리액트 버전에서는 이러한 배칭이 리액트 이벤트 핸들러 내에서만 이루어짐리액트 버전 18에서 오토메틱 배칭..

Front/React.js 2024.08.25

[React] 시계 만들기 (Reandering Elements)

1초마다 렌더링을 하며 시간을 알려주는 시계를 만들어 보았습니다 Elements는 한번 생성되면 변경할 수 없음React의 Elements는 변하지 않는 성질을 가지고 있어 생성 후 children또는 attributes를 변경할 수 없으며화면에 생성된 Elements를 업데이트하기 위해서는 기존 Elements를 변경하는 것이 아닌 새로운 Elements를 생성하면 됨React가 렌더링되는 과정은 VirtualDOM(React 엘리먼트)에서 실제 DOM(DOM 엘리먼트)으로 이동하는 과정  작성한 소스코드를 웹사이트로 실행하고 개발자 모드인 F12를 눌렀을 때 1초씩 지날 때마다 개발자 모드의 코드가 깜빡깜빡 거리며 시간이 변경이 되는 시계를 완성하였음라이브러리 불러오는 곳에서 아직 실수를 해서 오류가..

Front/React.js 2024.08.12

[JavaScript] DOM

📱  DOM (Document Object Model)html이나 xml 같은 문서에 요소들을 계층적으로 표현해서 생성하고 수정하고 삭제하는 등어떤 조작이 가능하게끔 해주는 하나의 인터페이스를 의미모든 html의 요소들은 html 도움을 통해 우리가 접근할 수가 있고 조작할 수 있게 됨DOM을 배우는 이유는 html 문서에 있는 어떤 요소를 조작하거나 새로운 요소를 만들어서 html 문서에 추가하거나 기존의 요소를 삭제하는 것을 하기 위함요소 선택과 변경, 생성이라는 크게 3가지 분류로 나눠서 이야기요소를 조작하려면 우선 어떤 요소를 조작할 지 요소를 선택하는 과정 필요html 문서에 있는 요소들 중에 내가 원하는 특정 요소를 선택하기 위해서는 html 문서 객체인 Document 객체에서 제공하는 메..

Front/JavaScript 2024.07.06