- react는 우리의 서비스를 interactive 하게 만들어주기 위해 만들어졌다
- reactjs는 거의 js로 이루어져 있으며, vanillajs 의 문제점을 많이 해결해준다
- 따라서 vanilla로 불편함을 알고 react를 쓰는 것과 그냥 react부터 달려드는 것은 다르다
- vanillajs 로 버튼 클릭 수 화면에 띄우기
-
<!DOCTYPE html> <html lang="en"> <body> <span>Total clicks: 0</span> <button id="btn">click me</button> </body> <script> let counter = 0 const button = document.getElementById('btn') const span = document.querySelector('span') function handleClick() { counter = counter + 1 span.innerText = `Total clicks: ${counter}` } button.addEventListener('click', handleClick) </script> </html>
-
- react로 같은 기능 만들기
- react에서는 script 안에서 element를 만들어 interactive하게 함
- 어려운 방법, 쉬운 방법이 있는데 어려운 것부터 배워서 react의 본질을 깨우친다
-
<!DOCTYPE html> <html lang="en"> <body> <!-- 위치 지정하기 위해 적는 유일한 html 코드 --> <div id="root"></div> </body> <!-- import React --> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <script> const root = document.getElementById('root') // argument: 태그 이름, property, 내용 const span = React.createElement('span', { id: 'sexy-span', style: { color: 'red' } }, "i'm a span") // 만든 span을 root에 배치하고 그려준다 ReactDOM.render(span, root) </script> </html> - 지금까지는 html에서 만든 것을 js에서 가져와서 업데이트 했다면, react에서는 js에서 만들고 업데이트 가능
-
<!DOCTYPE html> <html lang="en"> <body> <!-- 위치 지정하기 위해 적는 유일한 html 코드 --> <div id="root"></div> </body> <!-- import React --> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <script> const root = document.getElementById("root"); // argument: 태그 이름, property, 내용 const h3 = React.createElement( "h3", { onMouseEnter: () => console.log("mouse enter"), }, "i'm a span" ); const btn = React.createElement( "button", { onClick: () => console.log("i am clicked"), }, "click me" ); const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container, root); </script> </html>- property에 addEventlistener 대신하는 정보 입력 가능
- property 중 html에서 보일 내용과 안보일 내용을 알아서 구분함
- container에 h3, btn 리스트 형태로 넣고 그린다
-
jsx 이용하여 더 쉽게 코딩<!DOCTYPE html> <html lang="en"> <body> <!-- 위치 지정하기 위해 적는 유일한 html 코드 --> <div id="root"></div> </body> <!-- import React --> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!-- import Babel --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const root = document.getElementById("root"); // argument: 태그 이름, property, 내용 // const h3 = React.createElement( // "h3", // { // onMouseEnter: () => console.log("mouse enter"), // }, // "i'm a span" // ); // const btn = React.createElement( // "button", // { // onClick: () => console.log("i am clicked"), // style: { // backgroundColor: 'tomato' // } // }, // "click me" // ); const Title = ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> i'm a title </h3> ); const Button = ( <button style={{ backgroundColor: "tomato" }} onClick={() => console.log("i am clicked")} > click me </button> ); const container = React.createElement("div", null, [Title, Button]); ReactDOM.render(container, root); </script> </html> - 브라우저는 jsx 이해하지 못하므로 Babel transformer 설치하고 script type도 설정
- 위 방법은 느리지만, 배우는 단계이기에 이 방식으로 공부함
-
const Title = () => ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> i'm a title </h3> ); const Button = () => ( <button style={{ backgroundColor: "tomato" }} onClick={() => console.log("i am clicked")} > click me </button> ); // const container = React.createElement("div", null, [Title, Button]); const Container = () => ( <div> <Title /> <Button /> </div> ); ReactDOM.render(<Container/>, root);- Title, Button 함수여야 Container에 들어갈 수 있고 재사용 가능, 대문자로 시작해야 내가 만든 것으로 인식
- Container도 함수로 만들어 render안에 넣음
'course > nomadcoder' 카테고리의 다른 글
| [ReactJS로 영화 웹 서비스 만들기] Effects (0) | 2021.12.22 |
|---|---|
| [ReactJS로 영화 웹 서비스 만들기] Create React App (0) | 2021.11.17 |
| [ReactJS로 영화 웹 서비스 만들기] Props (0) | 2021.11.12 |
| [ReactJS로 영화 웹 서비스 만들기] State (0) | 2021.11.11 |
