Tiny Bunny
본문 바로가기
JavaScript/React

React - 뷰 갱신 원리

by 내이름효주 2024. 3. 20.
  • JSP 요청 순서
    • 브라우저 > 톰캣
    • 톰캣이 JSP를 실행 > 결과 HTML 생성
    • 톰캣이 HTML 결과를 브라우저에 전송
    • 브라우저가 받은 HTML을 랜더링
  • react 를 통한 증가, 감소
console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	const [number, setNumber] = useState(10);

	return (
		<div>
			숫자 : {number}
			&nbsp;
			<button
				onClick={() => {
					setNumber(number + 1);
				}}
			>
				증가
			</button>
			&nbsp;
			<button
				onClick={() => {
					setNumber(number - 1);
				}}
			>
				감소
			</button>
			<hr />
			현재 숫자는 {number}입니다
		</div>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));
  • button 클릭했을 때 setnumber()로 number값을 세팅해주는 방식
  • JQuery를 이용한 증가, 감소

  • .text로 기존 내용을 수정하는 방식