노마드코더 ReactJS로 영화 웹 서비스 만들기 강의 기록용 스토리
#2.1~ #2.2
최종 목표 : React JS와 바닐라 JS 비교하기
✍ 버튼을 클릭할 때마다
span의 innerText가 바뀌는 페이지바닐라 JS
<!DOCTYPE html> <html> <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 += 1; span.innerText = `Total clicks: ${counter}`; } button.addEventListener("click", handleClick); </script> </html>
💻 React JS 설치하기
- react JS : interactive UI를 가능하게 해줌
- react-dom : React element를 HTML에 두는 역할
*React에서는 html처럼body에 요소를 작성하지 않고 JS 코드를 사용함
✍ React JS로 HTML element 만들기 (어려운 방법)
<!DOCTYPE html> <html> <body> <div id="root"></div> </body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin </script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin </script> <script> const root = document.getElementById("root"); const span = React.createElement( "span", { id: "cool-span", style: { color: "red" } }, "Hello, I'm a span" ); //React로 접근해서 span 만들기 ReactDOM.render(span, root); </html>
📌 포인트
React.createElement(): React로 element를 만들어주는 코드
e.g.React.createElement('tag', props, content);거의 이렇게 쓸 일 없음(참고만 하기)
*props는 property가 포함된 object(id, class, style 등이 들어갈 수 있음)ReactDOM.render(): React element를 HTML로 만들어 배치해줌
예제의 경우span을 root 안에 배치
#2.3 Events in React
✍ props에 eventListener 작성하는 방법 (어려운 방법)
<!DOCTYPE html> <html> <body> <div id="root"></div> </body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin </script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin </script> <script> const root = document.getElementById("root"); const h3 = React.createElement( "h3", { onMouseEnter: () => console.log("mouse enter"), }, "Hello, I'm a h3" ); const btn = React.createElement( "button", { onClick: () => console.log("I'm Clicked"), }, "Click me" ); const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container, root); </script> </html>
📌 포인트
React.createElement()에서 2개 이상의 component를 가지는 component를 만들 때는 array 사용- 함수 표현식 복습하기
#2.5 JSX
💻 JSX
- JavaScript를 확장한 문법
- HTML의 문법과 흡사한 문법으로 React Element를 만들 수 있음
💻 Babel 설치
- JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 역할
- 이번 코스에서만 이렇게 다룰 것!
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
✍ JSX로 React Element 만들기
<!DOCTYPE html> <html> <body> <div id="root"></div> </body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin </script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin </script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const root = document.getElementById("root"); const Title = ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> Hello, I'm a h3 </h3> ); const Button = ( <button onClick={() => console.log("I'm Clicked")}>Click me</button> ); const container = React.createElement("div", null, [Title, Button]); ReactDOM.render(container, root); </script> </html>
📌 포인트
- 변수들 선언하는 코드에
<script type="text/babel"></script>작성 - 관리자 도구에서 보면
head에 Babel이 변환한 코드가 들어가있음(위에서 사용한React.createElement();를 이용한 방식) onMouseEnter과onClick같은 eventListener가 들어간 방식
:onClick={}구조
{ }안에 eventListener 함수 넣기
#2.6 JSX로 여러 element를 만들기
React.createElement();를 사용하지 않고 아래 코드를 구현할 것
const container = React.createElement("div", null, [Title, Button]);✍변수들 함수로 만들어주기
return 문법
function Title() { return ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> Hello, I'm a h3 </h3> ); }
Arrow function expression
function Title = () => ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> Hello, I'm a h3 </h3> );
✍ Container 안에 Title, Button 넣기
<script type="text/babel"> const root = document.getElementById("root"); function Title() { return ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> Hello, I'm a h3 </h3> ); } const Button = () => ( <button onClick={() => console.log("I'm Clicked")}>Click me</button> ); const Container = () => ( <div> <Title /> <Button /> </div> ); ReactDOM.render(<Container />, root); </script> </html>생성한 컴포넌트 이름의 첫 글자는 대문자
차근차근 천천히