꼬마김밥의 개발새발

항상 DOM 에 대해서 이해를 못해서 이번기회에 다시 잡고 가야할 느낌 ㅎ_ㅎ예전에 kb교육 들을때 DOM Tree는 html 문서의 대상들을 tree구조로 인식함 이정도로만 이해했다. (당당) 그러면 dom이란 무엇인가 , 리액트에서는 왜 가상 돔을  사용하는 것인가에 대해 정리해보려고 한다.     1. DOM이란?  DOM (Document Object Model) : 말 그대로는 문서 객체 모델 자바스크립트가 웹 페이지들을 이루는 요소들을 사용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미  문서 객체란?javascript가 html , head , body와 같은 태그들을 이용할 수 있는 객체를 의미 그림으로 표현하자면 HTML element들을 tree형태로 표현한 것   DOM의 ..

■5.1 ref는 어떤 상황에서 사용해서 할까 -일반 html 에서는 DOM 요소에 이름을 달 때는 id를 사용한다. - HTML 에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서도 DOM에 이름을 다는 방법이 존재 → ref개념 Q. 어떨때 사용하는 것일까? A: DOM을 꼭 직접적으로 건드려야 할 때 이다. ▶5.1.1 예제 컴포넌트 생성하기 -ValidationSample.css & ValidataionSample.js생성 css에는 success(하늘색),failure(보라색)일때의 배경 색을 지정해주었다. -ValidationSample.js import React, {Component} from 'react'; import './ValidationSample.css';..

■ 3.1 클래스형 컴포넌트 ▶컴포넌트의 기능 -데이터가 주어지면, 이에 맞추어 UI를 만들어줌 -라이프 사이클을 API를 이용함 -임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있다. 컴포넌트를 선언하는 두가지 방식 : 함수 컴포넌트, 클래스형 컴포넌트 -클래스형컴포넌트 import React,{Component} from "react"; class App extends Component{ render(){ const name='react'; return {name} } } export default App; 클래스형과 함수 컴포넌트 차이점: 클래스형 컴포넌트의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있고 임의 메소드를 정의할 수 있다. 클래스형 컴포넌트에서는 render함수가 꼭 있..