-

React Element : 리액트 앱의 가장 작은 단위로 화살표에 표시할 내용을 기술 DOM을 그대로 반영 DOM에 엘리먼트 렌더링 React로 구현된 애플리케이션은 기본적으로 하나의 루트 DOM 노드가 있음 렌더링 순서 ReactDOM.createRoot()에 DOM 엘리먼트 전달 React 엘리먼트를 root.render()에 전달 const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, world; root.render(element); 렌더링 된 엘리먼트 업데이트 React 엘리먼트는 기본적으로 생성한 뒤 자식이나 속성을 변경할 수 없음. 이를 변경하기 위해서는 새로운 엘리먼트를 생성하여 ..

React 정의- Meta 에서 만든 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용 - 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움React 특징새로고침 없이 다른 페이지 이동가능JSX 사용Component이 조합 구성 - 재사용성 향상으로 개발 기간 단축, 유지보수 용이Virtual DOM 사용하여 DOM 업데이트를 추상화 함으로 처리 횟수를 최소화하여 효율적으로 관리하여 빠른 처리가 가능React Native를 활용하여 앱 개발 가능지속적인 버전 업데이트 및 라이브러리로 인한 방대한 학습 진행과 상태 관리(state)가 복잡한 단점이 있음리액트 DOM 업데이트 과정데이터를 업데이트하면 전체 UI를 Virtual DOM에 Rerender..

JSX (JavaScript XML) 자바스크립트에 XML을 추가한 확장 문법 Javascript의 공식적인 문법이라고 할 수는 없다. 브라우저에서 실행 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환. Javascript에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 장점이자 사용하는 이유 React에서의 JSX React.ceateElement()의 호출을 통해 일반 자바스크립트 객체인 'React 엘리먼트'로 컴파일 됨 Babel은 JSX를 React.createElement() 호출로 컴파일 함 // 아래 두 코드는 동일 const element = ( Hello, world! ); const element = React.createEl..