React <rfc 사용 함수의 컴포넌트 구조 : 숫자카운트>

⭐ 숫자 카운트 버튼

export default function ReactExample() {
//? 리액트 기능 사용 (함수형 컴포넌트의 기능: hook)
  const [count, setCount] = useState<number>(0);

  function increment() {
    setCount(count + 1);
  }
  
  function decrement() {
    setCount(count - 1);
    if(count <= 0) {
      setCount(0);
    }
  }

• useState<number>(0); :  useState 훅을 사용해 count에 기본값은 '0'이며 타입은 넘버로 지정한다.
• increment()함수를 countrk +1씩 증가하는 함수를 만들며 decrement 또한 동일하게 작서하며
  if조건문을 사용해 0 이하의 경우 0으로 표시되도록한다.

return (
    <div>
      <h1>Count: {count}</h1>
      {/*  
        JSX(TSX)에서는 속성 지정 시 lowerCamelCase 사용
        js(ts): onclick 속성
        >> jsx(tsx): onClick 속성
      */}
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  )
}

• jsx(tsx)에서는 return문을 사용해 HTML의 영역을 반환하다.
• Count : {count}에서 count에는 카운의 결과 값이 들어간다.
• onClick = {increment/decrement}함수를 사용하여 버튼을 클릭하면 카운트가 일어나도록 한다.

<button onClick={() => setCount( count + 1)}>증가</button>
<button onClick={() => setCount( count - 1)}>감소</button>

• 결과는 비슷하게 나오지만 위 방법보다는 함수를 활용한 것이 사용하기에도 편하다.

✔️결과

• 기본값은 0으로 설정해서 처음에는 0이 출력된다.

 

• 증가를 누를 면 증가함수가 활성되면서 1씩 숫자가 증가하며 감소를 누르면 숫자가 감소를 한다. 
  이때, if조건문 때문에 0밑으로는 숫자가 내려가지 않는다.