1. Application with Js
React를 본격적으로 공부하기에 앞서 Js와 비교를 통해 React의 강력함을 느껴보자.
먼저 아주 간단한 Js 어플리케이션을 만든다. 버튼을 클릭하면 몇번 클릭했는지 세는 어플이다. 코드는 다음과 같다.
<!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>
버튼을 클릭하면 몇번 클릭했는지 세어주는 어플이다. UI도 매우 간단하다. 이 어플을 만들기 위해 했던 과정을 "굳이" 일렬로 표시해보자.
- html에 문자열과 버튼을 생성한다.
- js에서 클릭 횟수를 세기 위해 counter 변수를 생성한다.
- button객체를 getElementById를 통해 가져온다.
- 버튼 클릭 이벤트를 받는다.
- 클릭 이벤트마다 수행하기 위한 함수를 만든다.
- span을 querySelector를 통해 받아온다.
- counter 변수와 span의 innerText를 수정한다.
정리하면 이 정도쯤 될 것 같다. 기능만 구현한다면 이 정도도 나쁘지는 않은 것 같다. 기존의 text를 유지하기위해 문자열을 하드코딩하는 등 조금 불편한 부분이 있기는 하다만 어쨋든 잘 동작한다.
2. Application with React
이번엔 같은 어플을 React로 구현해보자. 정확히는 같은 어플을 React로 구현해보면서 React의 기초부터 천천히 공부할 계획이다.
React를 사용하기 전에 당연히 먼저 설치를 해야한다. React를 사용하고자 하는 html파일에서 다음 코드를 추가한다.
<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>
React와 바닐라 Js의 가장 큰 차이점을 말한다고 한다면 바닐라 Js는 html로 시작해서 Js로 끝난다. 그러나 React는 Js로 시작해서 html로 끝난다. 기존의 바닐라 Js가 html에서 id나 class로 객체를 가져와서 수정하고 이를 다시 업데이트하는 과정을 가졌다면 React는 처음부터 Js로 시작하여 이를 html로 보여준다.
다음은 html에 span을 생성하는 React 코드이다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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");
const span = React.createElement(
"span",
{id: "sexy-span"},
"Hello I'm a Span"
);
ReactDOM.render(span, root);
</script>
</html>body에는 root뿐이다. 대신 Js에서 React를 통해 span을 생성했고 ReactDOM을 통해 body에 뿌려주었다. React는 이런식이다. span을 생성할 때 createElement에는 순서대로 tag, property, content가 들어간다.
추가로 변수명은 어떻게 만들든 상관없으나 createElement에 들어가는tag명은 내가 만들고자 하는 tag명과 반드시 같아야한다.
이번에는 이벤트 등록을 해보자. React에서는 이벤트 등록을 property에서 가능토록 한다. 다음과 같이 말이다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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");
const h3 = React.createElement("h3", {
onMouseEnter: () => console.log("마우스 엔터")
},
"Hello I'm a Span"
);
const btn = React.createElement("button", {
onClick: () => console.log("클릭"),
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
Js에서 태그 생성과 동시에 이벤트 등록을 할 수 있다. 바닐라 Js에서 여러 줄에 걸쳐서 했던 일을 React에서는 단 한줄에 끝난다. 더 놀라운 점은 위와 같은 방법이 React에서 가장 불편한 방법 중 하나라는 것이다.
3. JSX & Babel
위와 같은 방법으로도 어플을 완성할수도 있겠지만 보다 더 편리하고 좋은 방법이 있다. JSX이다. JSX는 JS를 확장한 문법이다. JSX는 html과 매우 유사하기 때문에 보기 더 편하고 이해하기 쉽다.
React만을 사용해서 다음과 같이 썼다면
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("마우스 엔터"),
},
"Hello I'm a Span"
);JSX로 쓰면 다음과 같다.
const Title = (
<h3 id="title" onMouseEnter={() => console.log("마우스 엔터")} >
Hello I 'm Title
</h3>
);
한 눈에 보기에도 훨씬 이해하기 쉽다. html과 거의 동일하기 때문이다. 단 브라우저는 JSX를 이해하지 못한다. 때문에 JSX를 다시 React로 변환하는 과정이 필요하다. 이 역할을 해주는 것이 Babel이다.
따라서 Babel을 설치해야한다. 다음 코드를 추가한다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>또한 Js부분에 type으로 "text/babel"을 추가한다. 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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 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("마우스 엔터")} >
Hello I 'm Title
</h3>
);
const btn=(
<button
style={
{backgroundColor : "tomato",}
}
onClick={() => console.log("클릭")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, btn]);
ReactDOM.render(container, root);
</script>
</html>
간단하게 정리해본다. JSX는 개발자가 React를 편리하게 사용하기 위한 문법이며, babel은 브라우저가 이해할 수 있도록 JSX를 React로 변환해주는 역할이다.
아직 JSX 문법이 적용되지 않은 부분이 있다. container이다. container도 JSX문법을 적용하여 바꿔보자.
Container 안에 있는 Title과 Btn은 그 자체로 들어가게 되면 단순히 문자열로 인식된다. 이를 피하기 위해서 Title과 Btn을 함수로 바꿔줘야한다. 그리고 Container 안에 Title과 Btn은 하나의 Component로 넣어준다. 이때 반드시 Title과 Btn은 대문자로 시작해야한다.
전체 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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 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("마우스 엔터")} >
Hello I 'm Title
</h3>
);
const Btn=()=>(
<button
style={
{backgroundColor : "tomato",}
}
onClick={() => console.log("클릭")}
>
Click me
</button>
);
const Container = () =>(
<div>
<Title/>
<Btn/>
</div>
);
ReactDOM.render(<Container/>, root);
</script>
</html>
4. 마무리
React, JSX 그리고 Babel에 대해서 아주 간단하게 알아보았다.
아직 많이 공부하진 않았으나 Vue와 비슷할 것이라고 생각했는데 달라서 좀 놀랐다. 아직 기초 부분이라 그런걸수도 있다.
이 포스팅의 원본 코드가 궁금하다면 다음 깃을 참고하면 된다. 강의를 들으며 내가 직접 작성한 코드이다.
https://github.com/tomy9729/React-with-Nomad
GitHub - tomy9729/React-with-Nomad: 🦁노마드와 함께 리액트 공부하기🦁
🦁노마드와 함께 리액트 공부하기🦁. Contribute to tomy9729/React-with-Nomad development by creating an account on GitHub.
github.com
'Languages > React' 카테고리의 다른 글
| [React] 2-1. State (0) | 2022.01.08 |
|---|---|
| [React] 0. React (0) | 2021.12.12 |
