[React] JSX에 대해서
·
🍞 Front-End/React
📌 JSX React.createElement의 표현식이며 문자도 html도 아닌 javascript의 확장 문법이다. JSX 문법으로 작성된 코드는 Babel이 순수한 javascript로 컴파일하여 사용한다. JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 📌 Babel 컴파일러로 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램이다. html과 javascript 사이를 왔다갔다 할 수 있는 장점이 있다. (JSX => Javascript) Babel · The compiler for next generation JavaScript The compiler for next generation..
[React] React.createElement 컴포넌트
·
🍞 Front-End/React
📌 createElement React.createElement( type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment [props], // 리액트 컴포넌트에 넣어주는 데이터 객체 [...children] // 자식으로 넣어주는 요소들 ); 📌 태그 이름 문자열 type // type이 "태그 이름 문자열" 입니다. ReactDOM.render( React.createElement("h1", null, `type이 "태그 이름 문자열" 입니다.`), document.querySelector("#root") );​ 📌 리액트 컴포넌트 type // => => type이 "리액트 컴포넌트" 입니다. const Component = () => { return React.creat..
[React] React 라이브러리
·
🍞 Front-End/React
📌 DOM Document Object Model element는 우리 눈에 보이는 것이고, DOM은 브라우저가 이해하는 element의 원형이다. DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 developer.mozilla.org 📌 2개의 핵심 모듈 - ES6방식인 import를 사용할 수 있는 이유 import를 이용한 구문들이 webpack이나 다른 bundler를 통해 변경 가능하기 때문이다. ReactDOM.render( , document.getElementById("hell..