Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

훈돌라

2024. 5. 22. 리액트 복습 본문

카테고리 없음

2024. 5. 22. 리액트 복습

훈돌라 2024. 5. 22. 21:01

// 카운터 앱 만들어보기

 

 

정규 커리큘럼 과제에 집중하되 너무 막히면 머리도 식힐 겸, 복습도 할 겸 지난 강의들을 다시 들어보며 실습하는 시간을 가지려고 한다.

 

import './App.css'  // CSS 파일을 가져옵니다.
import React, { useState } from "react";

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

  const onMinusButtonClick = () => {
    setNumber(number - 1);
  }

  const onPlusButtonClick = () => {
    setNumber(number + 1);
  }

  return (
    <div>

      <div>{number}</div>

      <div>
        <button onClick={onMinusButtonClick}>-1</button>
        <button onClick={onPlusButtonClick}>+1</button>
      </div>

    </div>
  );
};

export default App

 

 

App 컴포넌트를 정의

const App = () => {

 

const [number, setNumber] = useState(0);

상태 변수 'number'와 이를 업데이트하는 함수 'setNumber'를 선언

 

 

const onMinusButtonClick = () => {

setNumber(number - 1);

}

 'number'를 1 감소시키는 함수

 

 

 

const onPlusButtonClick = () => {

setNumber(number + 1);

}

'number'를 1 증가시키는 함수

 

 

 

return (

<div>

<div>{number}</div> 

 현재 number 상태를 화면에 표시

 

<div>

<button onClick={onMinusButtonClick}>-1</button>

<button onClick={onPlusButtonClick}>+1</button>

 버튼을 클릭할 때마다 각각의 함수가 호출됩니다.

 

 

</div>

</div>

);

};