Vanilla JS 와 React JS 의 차이
[노마드 코더] ReactJS로 영화 웹 서비스 만들기 #1
- React JS 는 페이스북에 의해 만들어 졌고, 아직도 사용 중
- 최근엔 인스타그램, 핀터레스트, 넷플릭스 등 큰 사이트들도 React JS 를 사용함
[노마드코더] ReactJS로 영화 웹 서비스 만들기 #2
<!DOCTYPE html>
<html>
<body></body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const span = React.createElement("span");
</script>
</html>
1. 위 코드 실행 시에는 그냥 흰 백지화면으로 elements 확인 시 body 안은 당연히 비어있고,
console에 span을 치면 span은 생성되었지만 페이지에는 올라오지 않은 것을 확인 가능함
2. body 안에 React element 를 가져다 두는 방법 : React JS 가 HTML 생성하게 하려면 react-dom 이 필요함.
- React JS 는 어플리케이션이 아주 interactive하게 만들어주는 library이며,
interactive한 UI를 만들 수 있게 하는 엔진과 같음
- react-dom 은 library 또는 package 인데 모든 React element 들을 가져다가 HTML 로 바꾸는 역할
3. ReactDOM 과 render
- render : 여기 React element를 가지고 HTML로 만들어 배치한다는 의미 즉, 사용자에게 보여준다는 뜻.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement("span");
ReactDOM.render(span, root); // ReactDOM에게 span을 root 안에 두고, span을 root 안에 render 하라는 코드
</script>
</html>위 코드 실행 시 elements 의 body 안에 id="root"인 div 있는 것 확인 가능하며,
root 안에 span 이 정상적으로 render 됨
4. span 의 property
- property 는 class name이 될 수도 있고 id가 될 수도 있음, span에 두고 싶은 무엇이든 괜찮음
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement("span", { id: "hello-span" });
ReactDOM.render(span, root);
</script>
</html>
5. 여전히 비어있는 span 안에 무언가 넣기
- createElement의 세번째 argument는 span의 내용(content)
const span = React.createElement("span", { id: "hello-span" }, "Hello, I'm a span");
위 코드처럼 React.createElement를 사용한 단 한 줄의 Javascript 코드로 만들어진 아래의 HTML
+ style 도 줄 수 있음
const span = React.createElement(
"span",
{ id: "hello-span", style: { color: "red" } },
"Hello, I'm a span"
);
=> 따라서, React JS 는 Vanilla 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 = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>(위는 Vanilla JS 코드와 실행 결과이다. )
* Vanilla JS
1. HTML 먼저 만들기
2. JavaScript 로 가져오기
3. event 감지
4. 데이터 업데이트 (HTML 수정 등)
* React JS
: HTML 직접 작성하지 않는 대신 JavaScript 와 React JS 이용하여 element 생성함
1. Javascript 에서 시작
2. HTML 에서 끝
이라는게 핵심.
Javascript 와 React JS 를 사용하여 element 를 생성할 때에는
React JS 가 element 를 생성하고 있음(React.createElement(...))
이 말은, React JS 가 업데이트가 필요한 element 를 업데이트할 것이라는 말
= React JS 가 결과물인 HTML 을 업데이트 할 수 있다는 것
= React JS 는 유저에게 보여질 내용을 컨트롤할 수 있다는 뜻
* Events in React
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement("h3",null, "Hello, I'm a span");
const btn = React.createElement("button",null, "Click me");
const container = React.createElement("div",null, [span, btn]);
ReactDOM.render(container, root);
</script>
</html>
1. span 과 btn 두가지 모두 화면에 표시하고 싶다면,
새로운 변수 선언하여 array 안에 span 과 btn 을 화면에 표시하고싶은 순서대로 넣어줌
2. property 에 id, style 등의 변경 외에도 event Listener 를 등록할 수 있음
( React JS 에서는 on + event = event Listener )
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log( "mouse enter" )
},
"Hello, I'm a span");
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>
* JSX
- createElements 를 대체하는 이유는 개발자들에게 좀 더 편리한 도구를 사용하게 하기 위해
- JavaScript 를 확장한 문법
1. createElement 들을 JSX 코드로 변경하기
위 코드를 주석 시키고,
아래에 JSX 방식으로 위 코드와 같은 동작을 하는 새로운 코드 작성
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello, I'm a title
</h3>
- 일반적인 HTML 과 거의 비슷한 생김새
- h3 태그 사이에 내용 담고, property 는 HTML 태그의 속성처럼 적어줌.
같은 방법으로 button 도 JSX 코드로 변경
const Button = (
<button
style={{
backgroundColor: "tomato",
}} onClick={() => console.log("I'm clicked")}
>
Click me
</button>
);
2. 오류 해결
JSX 코드로 변경 시 오류가 뜨는데
babel/standalone 다운로드를 받아주고 타입을 적어주면 해결됨
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
=> 실행결과
+)
위 렌더링 코드 또한 아래의 JSX 코드로 변경 후 실행할 경우
그냥 텍스트만 나타난다.
=> 해결 방법!
Title 과 Button 의 모든 요소들을 포함시키기 위해서는
function, retrun문 또는 () => 을 사용하여 함수로 변경해준다.
function Title() {
return (
<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>
);
또한 내가 직접 만든 모든 요소들을 렌더링해서 다른 곳에서 사용할 경우 첫 글자는 반드시 대문자로 시작되어야 함.
(소문자로 시작하면 html 태그로 인식)
const Container = (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render( Container, root );위의 코드대로 실행해도 정상작동되고,
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render( <Container/>, root );위처럼 함수로 변경해서 실행해도 됨.
=> 실행 결과
