{"type": "doc", "content": [{"type": "heading", "attrs": {"level": 3}, "content": [{"text": "Virtual DOM 사용", "type": "text", "marks": [{"type": "bold"}]}]}, {"type": "paragraph", "content": [{"text": "Virtual DOM은 웹 브라우저가 생성한 DOM을 그대로 복사한 가상의 DOM이다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "화면 구성 요소를 업데이트 하려고 할 때 ", "type": "text"}, {"text": "자신이 관리하던 가상 DOM", "type": "text", "marks": [{"type": "bold"}]}, {"text": " 기반으로 변경된 부분을 반영한", "type": "text"}, {"text": " 새로운 가상 DOM", "type": "text", "marks": [{"type": "bold"}]}, {"text": "을 그린다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "이전에 관리하던 가상 DOM", "type": "text", "marks": [{"type": "bold"}]}, {"text": "과 ", "type": "text"}, {"text": "새로운 가상 DOM", "type": "text", "marks": [{"type": "bold"}]}, {"text": "을 비교해 다른 부분을 찾고 실제 DOM에 변경된 부분만 업데이트 한다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "실제 DOM을 조작하지 않고 Virtual DOM을 통해 조작하면서 웹애플리케이션 성능을 대폭 개선했다.", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "JSX(JavaScript XML) 문법 지원", "type": "text", "marks": [{"type": "bold"}]}]}, {"type": "paragraph", "content": [{"text": "자바스크립트에서 HTML 문법을 사용할 수 있다.", "type": "text"}]}, {"type": "codeBlock", "attrs": {"language": null}, "content": [{"text": "import React from 'react';\n\nexport default function App(){\n\tconst text= = 'JSX!';\n\treturn (\n\t\t

\n\t\t\t

React

\n\t\t\t

{text}

\n\t\t

\n\t);\n}", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "단방향 데이터 바인딩", "type": "text", "marks": [{"type": "bold"}]}]}, {"type": "paragraph", "content": [{"text": "자바스크립트 객체에 저장된 데이터", "type": "text", "marks": [{"type": "bold"}]}, {"text": "가 ", "type": "text"}, {"text": "웹 브라우저의 구성요소", "type": "text", "marks": [{"type": "bold"}]}, {"text": "로만 전달이 된다.", "type": "text"}]}, {"type": "codeBlock", "attrs": {"language": null}, "content": [{"text": "import {useState} from 'react';\n\nexport function App() {\n const [text, setText] = useState('hello react');\n return (\n

Hello React

\n \n

\n );\n}", "type": "text"}]}, {"type": "image", "attrs": {"alt": null, "src": "https://store.inforum24.com/memos/1032/447bc2b2-2191-448c-9e30-16d4df56a1c4-1", "title": null, "width": 781, "height": 338.873}}, {"type": "paragraph", "content": [{"text": "웹 브라우저 input에서 텍스트를 변경하려고 해도 변경이 되지 않는다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "리액트에서 JSX문법만으로 데이터 값을 바꾸는 ", "type": "text"}, {"text": "단방향 데이터 바인딩", "type": "text", "marks": [{"type": "bold"}]}, {"text": "을 지원하기 때문이다.", "type": "text"}]}, {"type": "paragraph"}, {"type": "paragraph", "content": [{"text": "출처 : [도서] 아는만큼 보이는 프런트엔드 개발", "type": "text"}]}]}

Text 자동 생성 기능을 활용해 보아요 - 리액트