[2022 하계 모각소] 2회차 결과

Virtual DOM : DOM을 추상화한 가상의 객체

기존의 DOM의 문제점 ?

⇒ 비효율적인 DOM 조작에 의한 랜더링

⇒ SPA(Single Page Application)의 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제

⇒ DOM이 변경될 때마다 브라우저는 CSS를 다시 계산한다는 문제점

리액트의 Virtual DOM

⇒ 변경 사항을 DOM에 직접 수정하는 게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정하게 한다.

Virtual DOM은 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한번에 전달하여 딱 한 번만 랜더링을 진행한다.

→ 직접 DOM에 접근하는 것을 막아주는 역할

DOM이 직접 변경된다면 사소한 수정 및 변경 사항 시 전체가 다시 랜더링되기 때문에 브라우저에 과부하가 올 수 있는 문제 ——> Virtual DOM이 해결해준다!

*diffing 알고리즘을 사용하여 변화된 부분을 파악한 후, 변경 사항을 일괄 처리하고 호출을 통해 한번에 실제 DOM에 적용하는 방식을 사용한다.

 

 

• 클래스형 컴포넌트
  • 상태값을 가질 수 있음 (state 기능)
  • 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있음
  • class 키워드로 시작
  • Component로 상속 가능
  • render() 함수를 사용하여 JSX 반환
  • props 조회 시 this 키워드 사용
• import React, { Component } from 'react'; class Hello extends Component { render() { const { color, name, isSpecial } = this.props; return ( <div style={{ color }}> {isSpecial && <b>*</b>} 안녕하세요 {name} </div> ); } } export default Hello;

 

• 함수형 컴포넌트
  • JSX를 return문을 사용하여 반환
  • state를 사용할 수 없음
  • 생명 주기 함수를 작성할 수 없음
• import React from 'react'; function Hello({ color, name, isSpecial }) { return ( <div style={{ color }}> {isSpecial && <b>*</b>} 안녕하세요 {name} </div> ); } export default Hello;

 

• 컴포넌트 : 함수형 컴포넌트로 컴포넌트 를 만들어서 전체적인 구조 익히기
• JSX 문법 : Javascript에 XML을 추가한 확장한 문법
  • 반드시 부모 요소 하나가 감싸는 형태여야 한다.
  • 자바스크립트 표현식
  • if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
  • React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
  • JSX 내에서는 {/…/}와 같이 주석 작성
• State 와 Props : useState를 사용하여 리액트 state를 관리하는 법에 대해 익히고, 새로운 컴포넌트를 또하나 만들어서 props를 전달하는 방법 익히기
  • State : 동적인 데이터 다룰 때 사용state 정의 → class field문법 사용
  • import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 } handleIncrease = () => { this.setState({ number: this.state.number + 1 }); } handleDecrease = () => { this.setState({ number: this.state.number - 1 }); } render() { return ( <div> <h1>카운터</h1> <div>값: {this.state.number}</div> <button onClick={this.handleIncrease}>+</button> <button onClick={this.handleDecrease}>-</button> </div> ); } } export default Counter;
  • Props : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없다. 이는 한 컴포넌트의 속성(Properties)과 같음을 의미한다.<ComponentName prop1={propValue1} … /> 와 같은 형태로 컴포넌트를 부를 때 함께 지정해준다. 같은 타입의 컴포넌트에 다른 props값을 주어 패턴이 반복되는 형태로 컴포넌트의 효율적인 재사용이 가능하다.
  • <Dog name="Ari" age={10} /> <Dog name="Bori" age={7} />