1. 학습목표
React를 찍먹해보자.
2. 학습의도
본 캠프가 시작되고나서 React를 접했을때, 혹시 멘탈이 나갈까봐
한 번쯤은 접해보고 싶어서 공부를 시작한다.
3. 학습내용
3-1. 리액트 사용 전
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <span>Total clicks: 0</span> <button id="btn">click me!</button> </body> <script> let counter = 0; const button = document.querySelector("#btn"); const span = document.querySelector("span"); function handleClick() { counter = counter + 1; span.innerText = `Total clicks: ${counter}`; } button.addEventListener("click", handleClick) </script> </html>
- 위와 같은 코드가 있다고 가정했을때,
react는 이와 같은 과정을 최적화 시켜준다고 한다. 살펴보도록 하자.
3-2. 리액트 사용 후
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> </body> //React Import <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script> const root = document.querySelector('#root'); const h3 = React.createElement("h3", { id:"title", onMouseEnter: () => console.log("mouseEnter"), }, "Hello, I`m Sexy-h3"); const btn = React.createElement('button', { onClick: () => console.log("i`m clicked"), style: { backgroundColor : "tomato", } }, "click me") const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container, root) </script> </html>
- 위 소스 코드는
react가 어떻게 작용하는지에 대한 이해를 도울 수 있는 코드다.
절대로 위와 같이 사용되지 않는다고 한다. 그러니 참고만 하자.
3-3. JSX
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> </body> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"> //JSX를 브라우저가 읽을 수 있도록 해준다.</script> <script type="text/babel"> //JSX를 읽을 수 있게 타입변경을 해준다. const root = document.querySelector('#root'); const title = <h3 id='title' onMouseEnter={() => console.log("MouseEnter!")}> Hello!, I`m a title</h3> const btn = <button id="btn" onClick={() => console.log("I`m Clicked!")}> Click me!</button> const container = React.createElement("div", null, [title, btn]); ReactDOM.render(container, root); </script> </html>
- 어?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> </body> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const root = document.querySelector('#root'); /* 렌더링을 위해서는 변수의 첫 글자를 대문자로 표기해야하고, array function을 사용해 함수로 만들어주어야 한다. */ const Title = () => ( <h3 id='title' onMouseEnter={() => console.log("MouseEnter!")}> Hello!, I`m a title </h3> ); const Button = () => ( <button id="btn" onClick={() => console.log("I`m Clicked!")}> Click me! </button> ); const Container = () => ( <div> <Title /> //컴포넌트의 첫 글자를 반드시 대문자! <Button /> //소문자는 HTML 태그로 인식한다. </div> ); ReactDOM.render(<Container />, root); </script> </html>
- 상당히 직관적이고, 편리해보인다.
주의사항만 잘 지킨다면 너무 좋을것같다.
자주 사용해서 익숙해져보자!
4. 잠시 스톱
새로운 과제가 생겼다. 우선 이것부터 해치우고 다시 공부를 시작하자.
