- 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}
<button
onClick={() => {
setNumber(number + 1);
}}
>
증가
</button>
<button
onClick={() => {
setNumber(number - 1);
}}
>
감소
</button>
<hr />
현재 숫자는 {number}입니다
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
- button 클릭했을 때 setnumber()로 number값을 세팅해주는 방식
- JQuery를 이용한 증가, 감소

- .text로 기존 내용을 수정하는 방식
'JavaScript > React' 카테고리의 다른 글
React - 함수 호출, 컴포넌트 분리 (0) | 2024.03.21 |
---|---|
React - 리스트 출력, 아이템 삭제 (0) | 2024.03.21 |
React - 기록, map, 배열 (0) | 2024.03.20 |
React - className, useState 활용 (0) | 2024.03.20 |
React - 개념, 새로운 태그 사용 (0) | 2024.03.20 |