no JSX
버전 번호는 x.y.z 형태로, 치명적인 버그를 수정할 때는 z 번호를 바꾸고,
새로운 기능을 출시하거나 치명적이지 않은 버그를 수정할 때는 y 번호를 바꾸고,
호환성이 유지되지 않는 변경이 있을 때는 x 번호를 바꾸어 배포한다고 합니다.
그러니까 17과 17.0.2 사이에는 치명적인 버그가 두 번이나 발견되어 수정되었다는 뜻이니
17.0.2를 받으세요! :)
ReactJS를 사용하기 위해 아래 두 패키지 설치 필수
react : 어플리케이션이 아주 인터랙티브하도록 만들어주는 library. 엔진과 같다.
react-dom : react element들을 가져다가 HTML로 바꾸는 역할
React.createElement("tag", {tag의 property props}, tag의 content)
property는 id, class, style, event listenr 등 가능
ReactDOM.createRoot(element가 들어갈 위치).render(element)
render() : react element를 가지고 HTML로 만들어 배치한다 => 사용자에게 보여준다
* 보통 body 태그에 id=“root” 부여하여 root 이름으로 호출
코드 순서
VanilaJS : HTML → JS
ReactJS : JS → HTML
JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것
React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있음
<!-- before JSX -->
<body>
<div id="root"></div>
</body>
<script src="...react" />
<script src="...react-dom" />
<script>
const root = document.getElementById("root")
const title = React.createElement("h3", {
id: "title",
onMouseEnter: () => console.log("mouse enter")
}, "Hello I'm a title")
const button = React.createElement("button", {
style: { backgroundColor: "tomato" },
onClick: () => console.log("I'm clicked!")
}, "Click Me")
const container = React.createElement("div", null, [title, button])
ReactDOM.render(container, root)
</script>with JSX
JSX : createElement를 대신하여 react 요소를 HTML과 유사한 문법으로 생성시켜주는 JS를 확장한 문법
babel : JSX를 브라우저가 이해할 수 있는 형태로 코드를 변환시켜줌
★ 컴포넌트는 반드시 대문자로 시작할 것! (소문자는 기존 HTML 태그)
<!-- after JSX -->
<body>
<div id="root"></div>
</body>
<script src="...react" />
<script src="...react-dom" />
<script src="...babel" />
<script type="text/babel">
const root = document.getElementById("root")
const Title = () => (
<h3
id="title"
onMouseEnter={() => console.log("mouse enter")}
>
Hello I'm a title
</h3>
)
const Button = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("I'm clicked!")}
>
Click Me
</button>
)
const Container = (
<div>
<Title />
<Button />
</div>
)
ReactDOM.render(<Container />, root)
</script>
'Front-end > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| [React] Props (0) | 2024.01.12 |
|---|---|
| [React] State (0) | 2024.01.10 |
| [React] Why React (0) | 2024.01.09 |