๐Ÿ”ซ React_03 useState

qhflrnfl4324ยท2022๋…„ 1์›” 6์ผ
1

React

๋ชฉ๋ก ๋ณด๊ธฐ
3/5
post-thumbnail

๐ŸŽฎ useState

  • ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ณด์—ฌ์ค˜์•ผ ํ•˜๋Š” ๋‚ด์šฉ์ด ์‚ฌ์šฉ์ž ์ธํ„ฐ๋ž™์…˜์— ๋”ฐ๋ผ ๋ฐ”๋€Œ์–ด์•ผ ํ•  ๋•Œ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„๊นŒ?

๋ฆฌ์•กํŠธ 16.8 ์ด์ „ ๋ฒ„์ „ : ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.
๋ฆฌ์•กํŠธ 16.8์—์„œ Hooks ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜๋ฉด์„œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.
=> ๋ฆฌ์•กํŠธ Hooks ์ค‘ ํ•˜๋‚˜์ธ useState ํ•จ์ˆ˜๋กœ ์ƒํƒœ ๊ด€๋ฆฌ

๐ŸŽฒ Counter ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ

  • src ํด๋”์— Counter.js ์ƒ์„ฑ
  • ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์ˆซ์ž๊ฐ€ ๋ฐ”๋€๋‹ค.
// 1
import React from "react";

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Couter;

์ด๋ฒคํŠธ ์„ค์ •

  • Counter ์—์„œ ๋ฒ„ํŠผ์ด ํด๋ฆญ๋˜๋Š” ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ, ํŠน์ • ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋„๋ก ์„ค์ •
// 2
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 Couter;

๋™์ ์ธ ๊ฐ’ ๊ด€๋ฆฌ = useState

  • ์ปดํฌ๋„ŒํŠธ์—์„œ ๋™์ ์ธ ๊ฐ’ = ์ƒํƒœ(state)
  • ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ = useState ํ•จ์ˆ˜ ์‚ฌ์šฉ
    => ๋ฆฌ์•กํŠธ ํŒจํ‚ค์ง€์—์„œ useState ํ•จ์ˆ˜๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉ
// 3
import React, { useState } from "react";

function Counter() {
  // ์ฒซ ๋ฒˆ์งธ ์›์†Œ(number) : ํ˜„์žฌ ์ƒํƒœ
  // ๋‘ ๋ฒˆ์งธ ์›์†Œ(Setter) : Setter ํ•จ์ˆ˜
  // ์ƒํƒœ์˜ ๊ธฐ๋ณธ๊ฐ’์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„ฃ์–ด์„œ ํ˜ธ์ถœ
  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 Couter;

๋ฐฐ์—ด ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น

  • ๋ฐฐ์—ด ์•ˆ์— ์žˆ๋Š” ๊ฐ’์„ ์ถ”์ถœํ•ด์„œ ๋ณ€์ˆ˜ ํ˜น์€ ์ƒ์ˆ˜๋กœ ๋ฐ”๋กœ ์„ ์–ธ
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

// ๋ฐฐ์˜ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น
const [number, setNumber] = useState(0);

ํ•จ์ˆ˜ํ˜• ์—…๋ฐ์ดํŠธ

  • ์œ„์˜ ์ฝ”๋“œ์—์„œ Setter ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, ์—…๋ฐ์ดํŠธ ํ•˜๊ณ  ์‹ถ์€ ์ƒˆ๋กœ์šด ๊ฐ’์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„ฃ์–ด์คŒ
    => ๊ธฐ์กด ๊ฐ’์„ ์–ด๋–ป๊ฒŒ ์—…๋ฐ์ดํŠธ ํ•  ์ง€์— ๋Œ€ํ•œ ํ•จ์ˆ˜๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ฐ’์„ ์—…๋ฐ์ดํŠธ ํ•˜๊ธฐ
// 4
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 Couter;

App์—์„œ Counter๋ฅผ ๋ Œ๋”๋ง

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

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

export default App;

๐ŸŽฒ input ์ƒํƒœ ๊ด€๋ฆฌ

  • src ํด๋”์— InputSample.js ์ƒ์„ฑ
// InputSample.js
import React from "react";

function InputSample() {
  return (
    <div>
      <input />
      <button>์ดˆ๊ธฐํ™”</button>
      <div>
        <b>๊ฐ’: </b>
      </div>
    </div>
  );
}

export default InputSample;
  • input์— ์ž…๋ ฅํ•˜๋Š” ๊ฐ’์ด ํ•˜๋‹จ์— ๋‚˜ํƒ€๋‚˜๊ธฐ
  • ์ดˆ๊ธฐํ™” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด input ๊ฐ’์ด ๋น„์›Œ์ง€๊ธฐ
    => input์˜ onChange ์ด๋ฒคํŠธ ์‚ฌ์šฉ
    => ์ด๋ฒคํŠธ์— ๋“ฑ๋กํ•˜๋Š” ํ•จ์ˆ˜์—์„œ๋Š” ์ด๋ฒคํŠธ ๊ฐ์ฒด e๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋ฐ›์•„์™€์„œ ์‚ฌ์šฉ
    => ์ด ๊ฐ์ฒด์˜ e.target์€ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ DOM์ธ input DOM์„ ๊ฐ€๋ฅดํ‚ด
    => ์ด DOM์˜ value ๊ฐ’, ์ฆ‰ e.target.value๋ฅผ ์กฐํšŒํ•˜๋ฉด ํ˜„์žฌ input์— ์ž…๋ ฅํ•œ ๊ฐ’์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
// InputSample.js
import React, { useState } from "react";

function InputSample() {
  const [text, setText] = useState("");

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText("");
  };

  return (
    <div>
      <input onChange={onChange} value={text} />
      <button onClick={onReset}>์ดˆ๊ธฐํ™”</button>
      <div>
        <b>๊ฐ’: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

App์—์„œ InputSample๋ฅผ ๋ Œ๋”๋ง

// App.js
import React from "react";
import InputSample from "./InputSample";

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

export default App;

๐ŸŽฒ ์—ฌ๋Ÿฌ ๊ฐœ์˜ input ์ƒํƒœ ๊ด€๋ฆฌ

// InputSample.js
import React, { useState } from "react";

function InputSample() {
  const onChange = (e) => {};

  const onReset = () => {};

  return (
    <div>
      <input placeholder="์ด๋ฆ„" />
      <input placeholder="๋‹‰๋„ค์ž„" />
      <button onClick={onReset}>์ดˆ๊ธฐํ™”</button>
      <div>
        <b>๊ฐ’: {text}</b>
        ์ด๋ฆ„ (๋‹‰๋„ค์ž„)
      </div>
    </div>
  );
}

export default InputSample;
  • input์˜ ๊ฐœ์ˆ˜๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ์ผ ๋•Œ useState๋ฅผ ์—ฌ๋Ÿฌ๋ฒˆ ์‚ฌ์šฉํ•˜๊ณ , onChange๋„ ์—ฌ๋Ÿฌ ๊ฐœ ๋งŒ๋“ค์–ด์„œ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์ข‹์ง€ ์•Š๋‹ค.
    => input์— name์„ ์„ค์ •ํ•˜๊ณ  ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์ด ๊ฐ’์„ ์ฐธ์กฐ
    => useState์—์„œ ๋ฌธ์ž์—ด์ด ์•„๋‹ˆ๋ผ ๊ฐ์ฒด ํ˜•ํƒœ์˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌ
import React, { useState } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  // ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ํ†ตํ•ด ๊ฐ’ ์ถ”์ถœ
  const { name, nickname } = inputs;

  const onChange = (e) => {
    // ์šฐ์„  e.target์—์„œ name๊ณผ value๋ฅผ ์ถ”์ถœ
    const { value, name } = e.target;
    setInputs({
      ...inputs, // ๊ธฐ์กด์˜ input ๊ฐ์ฒด ๋ณต์‚ฌ
      [name]: value, // name ํ‚ค๋ฅผ ๊ฐ€์ง„ ๊ฐ’์„ value๋กœ ์„ค์ •
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
  };

  return (
    <div>
      <input name="name" placeholder="์ด๋ฆ„" onChange={onChange} value={name} />
      <input
        name="nickname"
        placeholder="๋‹‰๋„ค์ž„"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>์ดˆ๊ธฐํ™”</button>
      <div>
        <b>๊ฐ’: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;
  • ๊ฐ์ฒด๋ฅผ ์ˆ˜์ •ํ•  ๋•Œ ์ง์ ‘ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ , ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ƒˆ๋กœ์šด ๊ฐ์ฒด์— ๋ณ€ํ™”๋ฅผ ์ฃผ๊ณ , ์ด๋ฅผ ์ƒํƒœ๋กœ ์‚ฌ์šฉ
// ์ง์ ‘ ์ˆ˜์ •
input[name] = value;

// ์ƒˆ๋กœ์šด ๊ฐ์ฒด ์ƒ์„ฑ
setInputs({
  ...inputs,
  [name]: value,
});

์ฐธ๊ณ 

0๊ฐœ์˜ ๋Œ“๊ธ€