기존에 Spring Boot를 이용한 서버와 API를 만들었고 프론트단을 JSP와 Thymeleaf를 사용해서 동적인 부분을 처리하는 서비스를 구현했었다. 하지만, Refresh token으로 인한 JWT token의 교체를 구현하는데 어려움이 있었고 동적인 View를 구성하는 데 있어 예전 팀프로젝트에서 사용했던 React를 배워보려고 한다.
강의를 찾아보다 노매드 코더의 무료강의가 눈에 띄어 찾아들어보게 되었다.
https://nomadcoders.co/react-for-beginners
우선, 첫 번째로 기존의 html과 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>기존의 방식은 html 문서 생성 -> <body>에 contents와 button생성 -> button에 JS를 연결 -> button의 click시 count의 증가
html의 tag를 생성 후 JS로 동적 변화를 주는 순서로 구현된다.
그리고 ReactJS를 이용한 구현은 다음과 같았다.
<!DOCTYPE html>
<html>
<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("mouse enter")},
"Hello"
);
const btn = React.createElement(
"button",
{onClick: () => console.log("button")},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>우선 React를 사용하기 위해 React와 React-Dom을 <script>로 불러온다.
<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의 경우 작동방식이 조금 달랐다.
먼저 최상단 <div> root를 생성 -> 변수 형태의 elements를 생성(btn, h3) -> root에 lender의 형태로 기존 JS와는 순서가 다소 반대로 되어있었다.
React.createElement() 함수를 이용하여 elements를 작성할 수 있지만, 조금 더 편한 방법으로 개선할 수 있다.
JSX (Javascript Syntax eXtension) 를 이용해 더 편한 방법으로 작성 후 babel로 변환해 주면 조금 더 쉽게 코드 작성이 가능하다.
<!DOCTYPE html>
<html>
<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("mouse enter")}>
Hello I'm a title
</h3>;
const Button = ()=>
<button style={{backgroundColor : "orangered"}} onClick={()=> console.log("im clicked")}>
Click me
</button>;
const container = React.createElement("div", null, [title, Button]);
ReactDOM.render(container , root); // span을 root안에 배치
// 만들어진 컴포넌트는 반드시 첫문자를 '대문자'로 구분하여 일반 tag와 혼동되지 않게한다.
const Container = ()=> (<div>
<Title />
<Button />
</div>);
ReactDOM.render(<Container/> , root);
</script>
</html>JSX와 babel을 사용하기 위해 script를 추가해 준다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
여기서 독특한 점은 변수 형태로 elements를 만들어 주는 방법은 비슷하지만 함수화 시켜 변수를 함수로 작성한다는 점이었다.
const h3 = React.createElement(
"h3",
{onMouseEnter: () => console.log("mouse enter")},
"Hello"
);const Title = ()=>
<h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>
Hello I'm a title
</h3>;위의 React.createElemnet를 사용할 경우 전달 인자를 (html tag, property, contents) 순으로 입력해 주어야 한다. 하지만 JSX를 사용하면 훨씬 더 html에 가까운 문법으로 elements를 생성할 수 있다. (실제로는 아래와 같이 작성 시에 babel을 통해 위의 코드처럼 변화한다.)
컴포넌트 구성의 특징은 1.함수 형태 2.첫 문자는 대문자 3.하나의 <div>안에 작성이다. 기존의 html tag와 혼동되지 않도록 컴포넌트의 첫 글자는 대문자를 사용해야 하며, 여러 가지 elements들이 있더라도 그것을 감싸는 부모 div가 꼭 필요하다.
이제 counter 변수를 설정하고 counter를 증가 시켜주는 함수를 만든다. countUp()함수가 실행이 되면 render함수가 작동하면서 화면을 다시 그려준다.
<!DOCTYPE html>
<html>
<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");
let counter = 0;
function countUP() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container/>, root);
}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUP}>Click me</button>
</div>
);
render();
</script>
</html>화면을 다시 그릴 때 vanilla JS와 ReactJS의 차이점이 있는데 vanilla JS의경우 counter를 포함하고 있는 tag 전체가 업데이트되는 반면, ReactJS 경우 변화가 일어나는 counter 부분만 변경이 된다. 이 점이 아주 신기하고 재미있었다.
왼쪽 : vanilla JS , 오른쪽 : ReactJS
git : https://github.com/leesulgi66/React_for_Beginners/commit/e12aadcbceab448d88d8194bd3b550a20a64b9f6
'개발일지 > React' 카테고리의 다른 글
| 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #7 Practice Movie App (0) | 2024.08.20 |
|---|---|
| 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #6 Effects (0) | 2024.08.15 |
| 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #5 Create React App (0) | 2024.08.13 |
| 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #4 Props (0) | 2024.08.09 |
| 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #3 State (1) | 2024.08.06 |
