모던 리액트7 2. JSX 1. JSX 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 *JSX를 JavaScript로 변환해줌 *JSX: Javascript XML, 자바스크립트를 확장한 문법으로 리액트 엘리먼트를 생성함 (1) 꼭 닫혀야 하는 태그 - self closing 태그 (2) 꼭 감싸져야하는 태그 - 리액트는 하나의 컴포넌트만 리턴할 수 있기 때문에 하나의 태그로 감싸주어야 함 - Fragment : 이름없이 태그 작성하면 만들어지고 브라우저 상에서 별도의 엘리먼트로 나타나지 않음 2. JSX 안에 자바스크립트 값 사용하기 import React from 'react'; import Hello from './Hello'; function App() { const name = 'react'; ret.. 2023. 1. 18. 1. 리액트 입문 1. 리액트는 어쩌다 만들어졌을까? (1) 배경 - JavaScript를 사용하여 HTML을 제어할 때에는 특정 DOM을 선택 -> 이벤트 발생하면 변화 주도록 설정 - 사용자와의 인터랙션이 자주 발생해 DOM을 직접 건드리면서 작업한다면 코드가 난잡해짐 - 그래서 Ember, Backbone, AngularJS 프레임워크가 만들어져 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해주어 업데이트하는 작업을 간소화해줌 (2) 리액트의 Virtual DOM - 리액트는 Virtual DOM을 사용해서 이를 가능하게 함 - Virtual DOM은 가상의 DOM으로 메모리에 가상으로 존재하는 JavaScript 객체이기 때문에 속도가 훨씬 빠름 - 리액트는 상태가 업데이트되면 필요한 곳의 U.. 2023. 1. 17. 이전 1 2 다음 반응형