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을 설치하고 불러와야함
'React' 카테고리의 다른 글
[React] useState, props (0) | 2023.06.12 |
---|---|
[React] 에러 해결 : img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text (0) | 2023.06.06 |
[React] 오류 sh: react-scripts: command not found (0) | 2023.06.04 |
[React]react-router-dom 설치하기 (0) | 2023.06.03 |
[React]npm start 실행할 때 포트가 이미 실행중이라고 뜰때 (0) | 2023.05.31 |