React useState를 이용한 Counter만들기

 

21.02.05

 

1. useState란

1-1. 설명

사용자에게 보여주는 컴포넌트가 동적으로 사용자 인터랙션에 따라 바뀌어야 할 때 사용한다.

컴포넌트에서 상태를 관리 할 수 있게 해준다.

* 컴포넌트에서는 동적인 값을 state라고 한다 *

---

1-2. 사용

useState를 호출할 때는 상태의 현재값을 넣는다.

useState의 반환값은 배열이며 첫 번째 원소는 현재상태, 두 번째 원소는 setter함수이다.

---

2. counter기본

Counter.js (src아래에 추가)

import React from 'react';

function Counter() {
    const onIncrease = function() {
        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;

 

App.js

import React from "react";
import Counter from "./Counter";

function App() {
  return (
    <Counter/>
  );
}

export default App;

 

+1버튼과 -1버튼을 눌렀을때 콘솔 log에 잘 찍히는 걸 확인할 수 있다.

---

3. useState사용

Counter.js

import React, {useState} from 'react';

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

    const onIncrease = function() {
        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;

* 1행 import React, {userState} from 'react'; -> react에서 useState라는 함수를 불러와준다.

* 4행 const [number, setNumber] = useState(0); -> 비구조화 할당을 통해 값을 받아왔다.

  비구조화 할당을 사용하지 않은 코드는 다음과 같다.

  const numberState = useState(0);
  const number = numberState[0];
  const setNumber = numberState[1];

---

4. 함수형 업데이트

컴포넌트 최적화를 할 때 사용한다.

 

Counter.js

import React, { useState } from 'react';

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

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

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

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

export default Counter;

* setNumber에 그 다음 상태값이 아닌 이전 상태를 업데이트해주는 함수를 넣었다.