개발자 시니

가상 돔(Virtual DOM) 이란? Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 ✅ 실제 DOM의 가벼운 사본 DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능 → 성능 향상 가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경이 있을 경우 해당 변경을 반영함 리액트가 가상돔을 반영하는 절차 EX) 특정 페이지에서 데이터가 변했다고 가정 했을 경우. - 리액트를 이용해 돔을 업데이트 시키는 절차 1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함 2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼..

돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할 ❓❔ 자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까? - Document라는 전역 객체를 통해 접근 - window라는 객체는 document객체의 상위에 위치 🙄❕❓ 가상 돔 (Virtual ..

리액트의 컴포넌트 리액트에서 컴포넌트는 앱을 이루는 최소한의 단위 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같음. 예시) 사이트를 구성하는 예를 들어보겠습니다. 기본적인 한 사이트의 홈 화면의 구조는 아래 그림과 같습니다. 컴포넌트란 UI 또는 기능을 단위별로 나눈(캡슐화한) 단위를 말합니다. 헤더, 바디, 푸터, 모두 컴포넌트의 조각이라고 말합니다. 이 조각들을 재사용할 수 있고, 이 조각들을 모아 홈 화면을 만듭니다. 헤더, 바디, 푸터의 각각의 컴포넌트를 홈 화면뿐 아니라 로그인 화면, 회원가입 화면 등등 필요 한 부분에 가져다 쓸 수 있음을 말합니다. 결론 컴포넌트는 독립적이며, 재사용 가능하게 만든 부품 조각들을 말합니다. 리액트로 만들어진 사이트 화면들은 컴포넌트의 조합입니다.

Props와 State React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용됨. Props 불변의 데이터 부모로부터 전달되는 변경 불가 State (상태) 가변 데이터 구성 요소에 의해 유지 변경 가능 Props와 State 차이점 State는 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있음. Props는 외부(부모 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없음. 컴포넌트의 개념을 모르시면 클릭~!! https://dev-cini.tistory.com/9?category=890664 [React] 리액트의 컴포넌트란? 리액트의 컴포넌트 리액트에서 컴포넌트는 앱을 이루는 최소한의 단위 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같음. 예시) 사이트..