리엑트를 처음 배우는 분이라면 이미 기본적인 자바스크립트(Vanilla Javascript)는 사용할 줄 아실 텐데요. 본격적으로 리엑트 에이에스(ReactJs)를 배우기 전에 코드 예제를 통해서 바닐라 자바스크립트와 리엑트 제이에스가 어떻게 다른지를 살펴보는 것은 두고두고 도움이 되는 좋은 경험이 될 겁니다. 먼저 간단한 자바스크립트로 버튼이 클릭될 때마다 Like 숫자를 하나씩 올려주는 html 페이지를 하나 만들어 보겠습니다. 그다음에 동일한 동작을 하는 ReactJs 코드를 작성하려고 합니다.
1. 바닐라 자바스크립트 코드 예제
예제에 사용할 html은 아래와 같이 단 3줄의 엘리먼트를 표시하고 있습니다. 맨 첫줄의 h1은 제목 역할을 하고 있습니다. Like라고 되어 있는 버튼이 있고 p 태그로 버튼을 클릭한 횟수를 표시하려고 합니다. 지금은 엘리먼트는 만들어져 있지만 코드를 작성하지 않아서 버튼을 클릭해도 아무런 반응을 하지 않고 있죠.
예제에 사용된 html 코드는 아래와 같습니다.
<head>
</head>
<body>
<h1>Hi Vanilla JS</h1>
<div>
<button id="like_btn">Like</button>
<p id="like_count_text">0 Likes</p>
</div>
</body>
<script>
</script>
</html>
1.1. 엘리먼트 가져오기
html로 작성된 엘리먼트를 가져오기 위해서는 자바스트립트를 사용해서 엘리먼트를 가져와야 합니다. button과 p 태그가 각각 id를 가지고 있어서 document.getElementById를 사용해서 엘리먼트를 가져옵니다.
<script>
let btn = document.getElementById("like_btn");
let count_text = document.getElementById("like_count_text");
</script>
엘리먼트를 가져 왔으니 이벤트 핸들러 함수를 작성하고 이벤트를 등록합니다.
1.2. 이벤트 핸들러 작성
버튼을 클릭할 때마다 변수인 like_count 값을 1 씩 증가시킵니다. 그리고 그 값을 콘솔에 로그로 표시해 보겠습니다.
아래 코드를 추가합니다.
let like_count = 0;
function btn_licked() {
like_count++;
console.log(`Like clicked ${like_count} times!`);
}
btn.addEventListener("click", btn_licked);
버튼을 클릭할 때마다 콘솔에 로그가 표시되는 것을 볼 수 있습니다.
하지만 화면에는 아직도 0 Likes라고 표시가 되고 있네요.
1.3. 텍스트 업데이트
텍스트를 업데이트 하기위해서는 버튼 클릭 이벤트 핸들러에 텍스트를 업데이트하는 코드를 추가해야 합니다. 아래와 같이 btn_clicked 함수를 수정합니다.
function btn_licked() {
like_count++;
console.log(`Like clicked ${like_count} times!`);
count_text.innerText = `${like_count} Likes`;
}
이제 버튼을 클릭하면 아래와 같이 콘솔에 로그가 찍히면서 텍스트에 있는 수자도 같이 변경되는 것을 볼 수 있습니다.
2. 리엑트 제이에스 코드 예제
앞서 바닐라 자바스크립트로 작성된 예제 코드를 리엑트 제이에스로 작성해 보려고 합니다. ReactJs를 사용하는 경우에는 일반적으로 html 엘리먼트를 미리 생성해 두지 않습니다. 우선 먼저 예제에 사용할 코드를 보겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
</body>
<script>
</script>
</html>
위 html을 브라우저로 읽어들이면 아무것도 표시되지 않을 겁니다. 그냥 아무것도 업이 하얀 화면만 보일 겁니다. 그게 정상입니다.
참고로 실제로 ReactJs로 개발을 할 때는 이 글에서 설명하는 방식으로 개발을 하지 않습니다. 여기서는 이 글의 목적인 바닐라 자바스크립트와 비교를 하기 위해서 예제 코드를 작성하고 있다는 점을 꼭 참고 바랍니다.
2.1. 리엑트 제이에스 추가
ReactJs를 사용하기 위해서는 2개의 자바스크립트 파일을 추가해야 합니다. 아래 2 라인을 html의 head 영역에 추가합니다. ReactJs API는 크게 react와 react-dom으로 나뉘어 있습니다. 두 종류의 API를 모두 사용하기 위해서 2개의 js 파일을 로드를 하는 것입니다.
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
이렇게 파일을 추가하면 React 오브젝트와 ReactDOM 오브젝트를 사용할 수 있게 됩니다. 콘솔에서 React. 을 타이핑해 보세요. 그러면 아래와 같이 사용할 수 있는 함수 목록이 나옵니다. 콘솔에서 ReactDOM. 도 타이핑해 보세요.
2.2. 엘리먼트 생성
React의 createElement를 사용해서 우리가 사용할 엘리먼트를 만들 수 있습니다. 만들어진 엘리먼트는 ReactDOM의 render API를 사용해서 DOM에 추가하게 됩니다. 아래와 같이 코드를 추가합니다.
<script>
let root = document.getElementById("root");
let h1 = React.createElement('h1', null, "Hi ReactJs");
let btn = React.createElement('button', null, "Like");
let text = React.createElement('p', null, "0 Likes");
let div = React.createElement('div', null, '', [btn, text]);
ReactDOM.render([h1, div], root);
</script>
화면에 ReactJs로 생성한 엘리먼트가 잘 표시되네요.
바닐라 자바스크립트로 작성된 html과 React로 생성된 엘리먼트의 차이 중 하나는 button과 p 엘리먼트에 id가 없다는 것입니다. 이것은 예제를 위해서 의도적으로 id를 넣지 않은 것이고 원한다면 간단히 넣을 수도 있습니다.
2.3. 이벤트 핸들러 작성
이전 자바스크립트로 이벤트 핸들러를 넣기 위해서는 id를 사용해서 엘리먼트를 가져와야 했습니다. 하지만 ReactJs를 사용하는 경우는 그렇게 하지 않고 엘리먼트를 생성하면서 바로 이벤트 핸들러를 추가할 수 있습니다. 아래와 같이 코드를 추가해 줍니다.
<script>
let root = document.getElementById("root");
let h1 = React.createElement('h1', null, "Hi ReactJs");
let like_count = 0;
let text = React.createElement('p', null, `${like_count} Likes`);
let btn = React.createElement('button', {
onClick: () => {
like_count++;
console.log(`Like clicked ${like_count} times!`);
}
}, "Like");
let div = React.createElement('div', null, '', [btn, text]);
ReactDOM.render([h1, div], root);
</script>
이렇게 하고 나면 버튼이 클릭될 때마다 콘솔에 로그가 나오는 것을 볼 수 있습니다. 한번 확인해 보세요.
2.4 텍스트 업데이트
이제는 클릭된 숫자만큼 표시되는 텍스트를 변경해야 합니다. 이 부분이 조금 코드가 지저분해지는데요. 이것은 이후 ReactJs를 제대로 사용하게 되면 깔끔하게 정리가 될 것입니다. 코드를 아래와 같이 수정합니다.
<script>
let root = document.getElementById("root");
let h1 = React.createElement('h1', null, "Hi ReactJs");
let like_count = 0;
let text = React.createElement('p', null, `${like_count} Likes`);
let btn = React.createElement('button', {
onClick: () => {
like_count++;
console.log(`Like clicked ${like_count} times!`);
let text = React.createElement('p', null, `${like_count} Likes`);
let div = React.createElement('div', null, '', [btn, text]);
ReactDOM.render([h1, div], root);
}
}, "Like");
let div = React.createElement('div', null, '', [btn, text]);
ReactDOM.render([h1, div], root);
</script>
추가된 코드를 보면 onClick 함수 안에서 text와 div를 새로 생성해서 reder 함수를 호출하는 것을 볼 수 있습니다. 이 부분을 JSX를 사용하면 어떻게 변경이 되는지 보도록 하겠습니다.
3. 리엑트에서 JSX 사용하기
3.1. JSX를 사용해서 코드 수정
리엑트 제이에스에서 중요한 요소 중에 하나가 JSX를 사용한다는 것입니다. 앞서 예제까지는 모두 자바스크립트 스펙 안에서 구현이 되었기 때문에 별도의 변환이 없이 코드를 실행할 수 있었습니다. 하지만 JSX는 자바스크립트 스펙이 아니기 때문에 별도의 변환툴을 사용해서 자바스크립트로 변환을 해야 브라우저에서 에러 없이 실행이 됩니다. 아래와 같이 JSX를 사용해서 코드를 수정해 보겠습니다.
<script>
let root = document.getElementById("root");
let Greeting = () => <h1>Hi ReactJs</h1>;
let like_count = 0;
let Text = () => <p id='like_count_text'>{like_count} Likes</p>;
let Btn = () => <button id='like_btn' onClick={() => {
like_count++;
console.log(`Like clicked ${like_count} times!`);
ReactDOM.render([Greeting(), Div()], root);
}}>Like</button>
let Div = () => <div>
<Btn />
<Text />
</div>;
ReactDOM.render([Greeting(), Div()], root);
</script>
코드를 저장하고 브라우저에서 새로고침을 하면 아래와 같이 에러가 납니다.
3.2. 바벨 추가하기
이렇게 JSX로 작성된 코드를 브라우저가 이해할 수 있는 자바스크립트로 수정을 해 주기 위해서 사용하는 것이 바벨입니다. 아래와 같이 바벨 자바스크립트를 헤더에 추가합니다.
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin 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>
</head>
script에 type을 text/babel로 추가합니다.
<script type="text/babel">
저장하고 브라우저를 새로 고침해 봅니다. 에러 없이 잘 동작하는 것을 볼 수 있습니다.
이 글에서 사용한 html 파일
'소프트웨어 개발' 카테고리의 다른 글
| 맥에 홈브루로 NodeJs 설치하고 NodeJs 버전 관리하기 (0) | 2023.04.11 |
|---|---|
| 맥오에스 홈브루 설치, 디렉토리 구조 이해하기 (0) | 2023.04.11 |
| 깃(git) 실전 가이드 (0) | 2018.11.27 |
