[ReactJS] - useState() 동적 상태관리로 카운터 만들기

useState를 통한 동적 상태 관리

사용자 인터랙션에 따라 변하는 값들 관리해주는 Hooks기능

---

리액트 16.8이전 버전에서는 함수형컴포넌트에서는 상태를 관리할 수 없었음

16.8버전에 Hooks기능이 도입되면서 함수형컴포넌트에서도 상태를 관리 할 수 있게 되었음

 

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

useState를 통해 기본값 설정,

useState는 배열을 반환 함

 

number는 현재 상태,

setNumber는 바뀔 함수

 

 

    카운터 만들기 실습 예제    

ReactJS - src구조

 

 

 

1. App.js  ( 부모 컴포넌트 )

import React from 'react';
import Counter from './component/Counter';
import './App.css';
class App extends React.Component {
  render() {
    return (
      <>
        <Counter /> {/* 자식 컴포넌트 불러서 사용 */}
      </>
    );
  }
}

export default App;

 

2. Counter.js( 자식컴포넌트 )

import React, { useState } from 'react'; // useState import필수

function Counter() {
  // 클래스 컴포넌트에서는 useState를 사용불가
  // 함수형 컴포넌트에서만 사용가능
  // number의 값을 useState에  0으로 설정
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    //setNumber(number + 1);
    // 리액트 컴포넌를 최적화하기에는 함수형 업데이트 사용하는게 좋음
    setNumber(prevNumber => prevNumber + 1);
  };
  const onDecrease = () => {
    //setNumber(number - 1);
    setNumber(prevNumber => prevNumber - 1);
  };
  return (
    <div>
      <h1>{number}</h1> {/*바뀔값을 {number}로 지정*/}
      {/*
      	onIncrease()로 함수를 호출하지 않음! 주의!
        함수 타입의 값을 그대로 넣어주면 됨
      */}
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

useState를 사용할 때 최적화를 위해 업데이트 함수를 사용하는 것이 좋음!

 

 

완성 하였으면 터미널에서

 yarn start 하여 확인!

 

---

출력된 결과물