2023.08.30 react 공부 정리

JSX is a syntax expression for JS which allows us to treat HTML as expressions; they can be stored in variables, objects, arrays, etc.

 

indes.js works as the entry point of our application

 

 

'react-dom'에서 import된 method들은 DOM 과 interact한다.

'react'에서 import된 method들은 DOM과 interact하지 않고, react의 하위구성이 아닌 것들과는 interact하지 않는다.

 

즉, DOM은 React에 쓰이지만, 그렇다고 해서 React의 일부분인 것은 아니다. 비-react applications에도 쓰이기 때문

'react'에서 import된 method들은 순수히 React으로만 쓰인다, 예를 들어서 components를 만들 때 or JSX elements를 만들 때

 

react component는 두 개의 core file들이 있다 > App.js와 index.js

App.js는 해당 application의 최상위 층(?)이고,

index.js는 entry point이다

 

multiline jsx표현은 ()로 둘러쌓여야 한다

---

Funtion Component

자바스크립트 function을 이용하여 새로운 reactcomponent를 define할 수 있고, 이를 function component라고 지칭한다

function component의 이름은 대문자로 시작해야하며, pascalcase를 주로 따른다 > 이는 html태그와 react component를 구별하기 위한 것이다

---

ReactDOM.createRoot(document.getElementById('app'));

---

이해가 잘 안되는 부분

return <div onHover={handleHover}></div>

handleHover에 ()가 없는 이유?

>handleHover()로 입력 시 immediately funciton이 실행됨

>방지하기 위하여 ()을 뺴고 입력