Javascript

React - View 만 신경 쓰는 라이브러리, 지속적으로 데이터가 변화하는 대규모 어플리케이션 구축하기

UI를 업데이트 하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근 가능

• component - 특정 부분이 어떻게 생길지 정하는 선언체
• 템플릿 - 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환함
• props는 properties로 컴포넌트 속성을 설정할 때 사용하는 요소. 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정
• state는 컴포넌트 내부에서 바뀔 수 있는 값
• 렌더링 - 사용자 화면에 뷰를 보여주는 것 render()
  • 컴포넌트가 어떻게 생겼는지 정의하는 역할
  • 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
  • 리액트 라이브러리는 view를 어떻게 랜더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공하는가? -> '초기 랜더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리랜더링' 개념을 이해.

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM트리 업데이트.

-> 리엑트는 virtual DOM방식을 사용하여 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행.

1. 데이터를 업데이트하면 전체 UI를 virtual DOM에 리렌더링
2. 이전 virtual DOM에 있던 내용과 현재 내용 비교
3. 바뀐 부분만 실제 DOM에 적용

DevTools에서 보이는 코드가 DOM이다

그렇습니다. 브라우저에서 지원하는 개발자 툴에서 보이는 것이 바로 DOM입니다! 이 툴에서 시각적으로 표현한 DOM이 나의 HTML 코드와 동일할 수는 있지만, 대개는 달라지게 되며 DevTool에서는 이러한 변경 사항이 적용되어 표시됩니다

yarn create react-app hello-react

yarn start