리액트를 본격적으로 공부하기 전
왜 리액트를 사용하는게 효과적인지에 대해 서술기본적인 버튼을 만들고 그 버튼을 클릭하면 클릭수가 올라가는 페이지를 만들어 보자
HTML
<!DOCTYPE html>
<html>
<body>
<span id="cnt">Total Count : 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const cnt = document.getElementById("cnt");
function handleClick() {
counter += 1;
cnt.innerText = `Total clicks : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>이런 식으로 body에 Element를 만들어주고 getElementById로 그 Element를 가져와서 addEventListener로 작동하는 방식
간단해보이지만 만약 HTML을 수정해야한다면 script도 수정해야하는 번거로움이 있을 수 있다.
ReactJS 1 - createElement
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!-- React - 감각적인 UI 만들도록 도와줌 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- ReactDOM - 모든 react element를 html body에 둘 수 있도록 도와줌 -->
<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",
{ onMouseEntser: () => console.log("mouse enter") },
"Here is span"
);
const btn = React.createElement(
"button",
{
style: { backgroudColor: "tomato" },
onClick: () => console.log("click"),
},
"Click Me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
// ReactDOM 18버전
// ReactDOM.createRoot(root).render(span);
</script>
</html>요소를 사용한 오래되고 복잡한 버전
createElement로 Element를 생성하고 따로 eventListener를 사용할 필요없이 property안에on + Event조합으로 사용해주면 된다.
다른 id나 class와 다르게 html에 남지않음!
ReactJS 2 - JSX
<!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>
<!-- babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// JSX - 컴포넌트의 첫 글자는 반드시 대문자, 소문자이면 JSX가 HTML 태그라고 생각함
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("click")}
>
Click Me
</button>
);
// 이렇게 사용하려면 위의 Title과 Button을 함수로 만들어줘야함
const Container = () => (
<div>
<Title /> <Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
- JSX는 HTML과 사용법이 유사
- 하지만 그냥 사용하면 브라우저가 온전히 해석을 못함.
=> babel을 사용하면 직전에 만든 코드처럼 바꿔줌.- 컴포넌트의 첫 글자는 반드시 대문자, 소문자이면 JSX가 HTML 태그라고 생각함
<Container />형태로 사용하려면 함수형태로 바꿔줘야함
ReactJS 3 - state
<!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 += 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total Count : {counter}</h3>
<button onClick={countUp}>Click Me</button>
</div>
);
render();
</script>
</html>비교
바닐라는 이렇게 click할때마다 body/span/click수가 같이 업데이트 되지만
리액트는 클릭수만 업데이트 되는 것을 확인할 수 있다.
ReactJS 4 - React.useState
const data = React.useState(0);
console.log(data)결과는 배열형태가 나옴.
React.useState를 이용해 이전에는 클릭마다 렌더함수를 사용했지만 간단하게 구성가능
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
// 자동렌더링
// setCounter(counter + 1);
setCounter((cur) => cur + 1); // 더 안전, 현재값을 참고
};
return (
<div>
<h3>Total Count : {counter}</h3>
<button onClick={onClick}>Click Me</button>
</div>
);
}
ReactDOM.render(<App />, root);
개발자 꿈나무