본문 바로가기

React

[React] React.JS, React-dom , Babel, JSX

React.JS

UI를 아주 인터랙티브하도록 만들어주는 library로 엔진과 같다.

UI에서 바뀐 부분만 업데이트 해준다. 

React-dom

library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌.

 

ReactDOM.render()

render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미

ReactDOM.render(span, span이 가야할 위치)

그래서 보통 body에 id=“root” 만들어서 span을 root 안에 둔다. 

 

JSX

 자바스크립트를 확장한 문법으로 html 문법과 유사하다.

1/ 보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 된다.

2/ 컴포넌트로 보기 쉽게 코드를 분리한 뒤 함께 렌더링할 수 있다. 컴포넌트는 꼭 첫글자는 대문자!! 아니면 HTML 태그로 생각한다

 

const Title = (

console.log("mouse enter")}>

Hello I'm a span

);

style={{ backgroundColor: "tomato" }}

Babel

 JSX를 브라우저가 이해하도록 코드를 변환해주는 기능

그래서 JSX를 사용할 때 Babel을 설치하고 불러와야함