[React] Day 10 - useState

➡️ +1, -1 을 수행하는 코드 만들기

시작화면

 

우선 +1, -1 버튼을 클릭했을때 특정 문구를 뜨게한다.

 

Counter.js

import React from 'react';

function Counter() {

  const onIncrease = () => {

    SVGAnimatedNumber()

  }

  const onDecrease = () => {

    console.log("-1");

  }

  return(

    <div>

      <h1>0</h1>

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

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

    </div>

  );

}

export default Counter;

결과사진

이렇게 버튼이 잘 클릭되는걸 확인할 수 있다.

📌여기서 화살표 함수를 이용하는 방법을 배워볼 수 있다.

const 함수명 = (변수) => {

    return 리턴값;

};

 

그리고 우리가 하고싶은 동작을 함수로 실현시킨다.

📌컴포넌트에서 동적인 상태의 값을 State라고 부른다. 리액트에 있는 useState라는 함수를 사용하면 컴포넌트에서 상태를 관리할 수 있다.

 

이 코드를 이용하여 리액트 페키지에서 useState라는 함수를 불러올 수 있다.

import React, { useState } from 'react';

📌useState를 사용하는 방법

const [state, setState] = useState(초기값);

ex) const [time, setTime] = useState(5);

 => 시계 컴포넌트 안에 time이라는 state가 생기고 초기값은 5초라는 뜻.

초기값을 변경하고 싶으면 setTime 함수를 사용하고 인자로는 바꾸고싶은 값을 넣으면 된다.

  => ex) setTime(6);

 

Counter.js

import React, { useState } from 'react';

function Counter() {

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

  const onIncrease = () => {

    setNumber(num + 1);

  }

  const onDecrease = () => {

    setNumber(num - 1);

  }

  return(

    <div>

      <h1>{num}</h1>

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

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

    </div>

  );

}

export default Counter;

 

결과사진

 

새로운 값으로 갱신을 하는 방법에는 다른 방법도 있다. 기존 값을 가지고 어떻게 업데이트를 할 지에 대해서 함수를 등록하는 방법이다.

const onIncrease = () => {

    setNumber(prevNumber => prevNumber + 1);

  }

  const onDecrease = () => {

    setNumber(prevNumber => prevNumber - 1);

  }

결과는 똑같이 나타난다.