React - 사용자 인터렉션 따라 내용 변경하기(useState)

동적상태관리

import React from 'react';

function Counter(){
  const onIncrease = () => {
    console.log('+1');
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
    <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

※ onclick으로 함수 연결 시, onClick 대문자로!

※ 만약 onClick={onIncrease()} 이렇게 함수 형태로 쓰면, 브라우저 호출과 동시에 함수 실행된다.

 

useState 함수 호출

import React, { useState } from 'react';

react에 있는 useState 함수를 호출하는 것

 

※ useState() 는 배열을 반환한다. 

 

import React, { useState } from 'react';

function Counter(){
  // number 라는 상태를 만들 것인데,
  // 기본값을 0으로 하겠다는 것
  // setNumber는 기존값을 변경하는 값
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }
  return (
    <div>
    <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

◑ 변경할 값을 어떻게 업데이트 할 것인지 정할 수 있음 - 함수형 업데이트

const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

이런식으로 써주면 number를 참고하는 것뿐만 아니라 어떠한 값을 어떻게 바꿀 것인지 정할 수 있다.

number + 1은 결과값만을 담고 있음