ReactJS - 리액트 시작

ROCKBELL·2022년 11월 30일
0

리액트

목록 보기
1/12

리액트란?

자바스크립트 오픈소스 라이브러리

초기 렌더링

render 함수는 html형식의 문자열이 아닌 뷰가 어떻게 작동하는지에 대한 정보가 담긴 객체를 반환합니다

render() {...}

조화 과정

리액트에서 뷰를 업데이트할때 조화 과정을 거친다 라고 표현하는 것이 정확합니다
이전 render()함수 반환 정보와 현재 render()함수 반환 정보를 최소한의 연산으로 비교한 후에 DOM 트리를 업데이트합니다

리액트의 특징

Virtual DOM

기존 웹브라우저단에서 DOM을 조작하면 repaint 현상이 발생하기 때문에 성능 저하 이슈가 발생했습니다

이를 해결하기 위해 업데이트가 발생하면, 추상화한 자바스크립트 객체를 사용한 Virtual DOM에 리랜더링 합니다

기존의 Virtual DOM과 현재를 비교하여 차이가 발생한 부분만 실재 DOM트리에 반영합니다

선언형

  • HTML / CSS / JS 를 하나의 파일에 명시적으로 작성
  • JSX 문법을 활용한 선언형 프로그래밍

컴포넌트 기반

  • 하나의 기능 구현을 위해 여러 코드를 묶어둔 형태
  • 컴포넌트로 분리되면 서로 독립적이고 재사용이 가능
  • <template> 은 HMTL 태그 형식을 문자열로 반환하는데 반해
    컴포넌트는 수많은 기능을 내장하고 있음

범용성

  • 리액트는 JavaScript 프로젝트 어디든 유연하게 적용
  • 다른 프레임워크와도 혼용 가능
profile
luv it

0개의 댓글