React Study

React - useState

eddie0329 2020. 11. 12. 00:40
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ์ฐจ

  • Introduction
  • useState
  • useState call back function
  • Conclusion

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜์€ ๋“œ๋””์–ด react hooks์ค‘ ํ•˜๋‚˜์ธ useState์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ useState

๊ฐ„๋‹จํ•˜๊ฒŒ counter๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

useState(arg) // useState์•ˆ์— ์ธ์ž๋Š” ์ดˆ๊ธฐ ๊ฐ’์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

const [number, setNumber] = useState(0); 
// ๊ทธ๋ฆฌ๊ณ  array๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ์ฒซ๋ฒˆ์งธ ์ธ๋ฑ์Šค๋Š” ๊ฐ’, ๋‘๋ฒˆ์งธ ์ธ๋ฑ์Šค๋Š” number๋ฅผ ์„ค์ •ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
}

export default Counter;

๐Ÿ“Œ useState call back function

์œ„์—์„œ setNumber๋Š” ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์š”.

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

์ด๋ ‡๊ฒŒ ์„ค์ •์„ ํ•˜๋Š” ์ด์œ ๋Š” ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉ์„ ํ•˜๊ณค ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ Conclusion

์˜ค๋Š˜์€ useState์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. vue3์—์„œ๋„ ์ด์™€ ๋น„์Šทํ•˜๊ฒŒ reactive๋ผ๋˜์ง€, ref๊ฐ™์€ ๊ฒƒ๋“ค์ด ๋‚˜์™”๋Š”๋ฐ ์‹ค์ œ๋กœ react์—์„œ ์‚ฌ์šฉ์„ ํ•ด๋ณด๋‹ˆ vue ๊ฐœ๋ฐœ์ž๋“ค์ด ์–ด๋””์—์„œ ์˜๊ฐ์„ ๋ฐ›์•˜๋Š”์ง€ ์ข€๋” ๋ช…ํ™•ํ•˜๊ฒŒ ์•Œ ์ˆ˜ ์žˆ์—‡๋˜ ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ๋˜๊ฑฐ ๊ฐ™์•„์š”. ๊ทธ๋Ÿผ ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ๋งŒ๋‚˜์š”~~!

๋ฐ˜์‘ํ˜•