[JavaScript] ReactJS: Basics

💻미션: 클릭하면 클릭 수 세는 버튼 만들기 💻

 

Vanilla HTML 

1) HTML 만들기

2) JavaScript에서 가져오기

3) listen for the event

4) update the data & HTML 

 

---

ReactJS

:애플리케이션이 interactive하도록 만들어주는 라이브러리 

 

ReactDOM(Document Object Model) 

: 모든 React 요소들을 HTML body에 둘 수 있도록 해주는 라이브러리 

 (React 애플리케이션을 브라우저에 렌더링) 

 (React elements -> HTML) 

 

학습용. 실제로는 이보다 더 간결하다(현업에서는 'createElement'를 사용할 일이 없다)

 

 

 

1) ReactJS, ReactDOM import하기 

2) body 안에 empty <div> 만들기: 나중에 여기서 ReactDOM이 React elements를 가져다놓는다 

3) root div를 가져와서 -> ReactDOM.render: React elements를 root div 내부에서 보여주라는 뜻 

4) ReactDOM은 root div 내부에서 container elements를 render한다. 

5) props 안에서 event listener를 등록할 수 있다 🤓

 

---

JSX: createElement 대체하기 

 

JSX(JavaScript XML): JavaScript + XML 

HTML과 문법이 유사

JavaScript 코드 내에서 UI를 작성할 수 있도록 함 

const h3 = React.createElement("h3", {id:"title", onMouseEnter:()=> console.log("mouse enter")}, "Hello, Im a span");

const Title = (<h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>Hello, Im a title.</h3>);

위 둘은 같은 기능을 하지만 아래 JSX 코드가 더 간결하다. 

 

 

btn도 마찬가지로 JSX로 간결하게 바꿔보자 

자바스크립트 컴파일러 바벨(https://babeljs.io/docs/)을 이용해서 다시 자바스크립트로 변환한다

 

위는 HTML에 익숙한 개발자들이 사용하는 방식이나, 

나는 애초에 HTML도 익숙하지 않기 때문에 JSX의 매력을 느끼지 못하겠다.😓

 

 

 

https://ko.legacy.reactjs.org/docs/introducing-jsx.html