이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다.
바닐라 JS와 React JS를 사용해 버튼을 몇 번 클릭했는지 세는 간단한 어플을 만들어보고
각 코드를 비교 분석해 React를 사용하는 이유에 대해 알아보도록 한다.
React JS 설치
: 두 개의 Javascript 코드 (react, react-dom)를 import 해야 한다.
<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>
그리고 console에서 다음과 같이 React를 부를 수 있으면 된다.
Vanila JS
바닐라 JS
<!DOCTYPE html>
<html>
<head> </head>
<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>
바닐라 JS 결과
버튼을 클릭할 때마다 숫자가 커지는 결과물이 생성되었다.
React JS 연습 #1
React JS 연습 #1
<!DOCTYPE html>
<html>
<head> </head>
<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: "sexy-span" },
"Hello, I'm a span"
); // span 생성
ReactDOM.render(span, root); // span을 root 안에 랜더링
</script>
</html>
여기서 render란
React element를 가지고 HTML로 만들어 배치함으로써 사용자에게 보여준다.
바닐라 JS와 달리 React JS는 HTML을 작성하지 않는다는 것을 확인할 수 있다.
물론 이러한 방법이 실제로 많이 사용되지는 않는다.
그저 이해를 돕고자 이렇게 작성했을 뿐이다.
React JS 연습 #1 결과
React JS는 우리가 지금껏 해왔던 방식을 거꾸로 하고 있다.
바닐라 JS에서는 HTML을 먼저 작성하고, 그걸 Javascript로 가져와 HTML을 수정하는 방식으로 수행했다.
하지만, React JS에서는 모든 것이 Javascript로부터 시작해 HTML이 된다.
즉, Javascript를 이용해 element를 생성하고 React JS가 그걸 HTML로 번역하는 것이다.
React JS 연습 #2 Events
React JS 연습 #2 Events
<!DOCTYPE html>
<html>
<head> </head>
<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"
); // h3 생성
const button = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: { backgroundColor: "tomato" },
},
"Click me"
);
const container = React.createElement("div", null, [h3, button]);
ReactDOM.render(container, root); // container를 root 안에 랜더링
</script>
</html>
각 element의 property에 on + event 를 입력해주면 React는 해당 property가 EventListener임을 인지하고 Listener를 추가해준다.
=> interactive한 애플리케이션을 만드는데 도움이 된다.
React JS 연습 #2 Events 결과
React JS 연습 #3 JSX
React JS 연습 #3 JSX
createElement를 대신해 더욱 간단한 방식을 사용해본다.
JSX란
JSX는 JavaScript를 확장한 문법이다.
JSX는 React element를 생성한다.
HTML과 모양이 비슷하다.
React 구성 요소는 일반적으로 JSX를 사용하여 작성되지만 구성 요소가 순수 JavaScript로 작성될 수도 있으므로 반드시 JSX일 필요는 없다.출처: https://ko.reactjs.org/docs/introducing-jsx.html
위 두 예시는 서로 동일하다.
<!DOCTYPE html>
<html>
<head> </head>
<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 Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root); // container를 root 안에 랜더링
</script>
</html>
React JS 연습 #3 JSX 결과
: 브라우저가 JSX를 이해하지 못해 에러가 발생한다.
이 문제를 해결하기 위해 Babel을 설치해야 한다.
Babel은 JSX로 작성한 코드를 브라우저가 이해할 수 있는 형태로 변환해준다.babel 사용 Babel 설치
출처: https://babeljs.io/docs/en/babel-standalone 해당 script를 추가해주고 우리가 작성한 script에 type으로 "text/babel"을 추가해준다.
더보기
수정된 코드
<!DOCTYPE html>
<html>
<head> </head>
<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 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 title
</h3>
);
const Button = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root); // container를 root 안에 랜더링
</script>
</html>
React JS 연습 #4 JSX
위 코드에서
const container = React.createElement("div", null, [Title, Button]); 를
const Container = <div> Title Button</div>; 으로 변경해 주었다.
그 결과
단순히 Title, Button 텍스트만 출력되는 것을 확인할 수 있다.
Title과 Button을 포함시키기 위한 방법은 다음과 같다.
- Title과 Button을 함수로 만들어준다.
- 일반적인 HTML 태그처럼 포함시켜준다.
주의!
<button/>이 아닌 <Button/>으로 작성해야 함에 유의한다.
<button/>으로 작성하게 되면 HTML의 button으로 인지되어 우리가 원하는 결과와 다른 결과물이 생성된다.
따라서, 우리가 직접 만든 컴포넌트를 랜더링해서 다른 곳에서 사용할 경우 항상 대문자로 시작하도록 한다.
React JS 연습 #4 JSX
<!DOCTYPE html>
<html>
<head> </head>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
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("im clicked")}
>
Click me
</button>
);
const Container = () => (
<div>
<Title /> <Button />
</div>
);
ReactDOM.render(<Container />, root); // container를 root 안에 랜더링
</script>
</html>
React JS 연습 #4 JSX 결과
