We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

Using the State Hook

Hook์€ React 16.8๋ฒ„์ „์— ์ƒˆ๋กœ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Hook์€ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š์•„๋„ state์™€ ๊ฐ™์€ ํŠน์ง•๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Hook ์†Œ๊ฐœ์—์„œ ์•„๋ž˜ ์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด Hook๊ณผ ์นœํ•ด์กŒ์Šต๋‹ˆ๋‹ค.

import React, { useState } from 'react';

function Example() {
  // ์ƒˆ๋กœ์šด state ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , count๋ผ ๋ถ€๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

์•„๋ž˜์˜ ํด๋ž˜์Šค ์˜ˆ์‹œ์™€ ๋น„๊ตํ•˜๋ฉฐ Hook์˜ ํŠน์ง•์— ๋Œ€ํ•ด ๋ฐฐ์šธ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

Hook๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ํด๋ž˜์Šค ์˜ˆ์‹œ

React์—์„œ ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•ด๋ดค๋‹ค๋ฉด, ์•„๋ž˜์˜ ์ฝ”๋“œ๋Š” ์ต์ˆ™ํ•  ๊ฒ๋‹ˆ๋‹ค.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

์œ„ ์ฝ”๋“œ์—์„œ state๋Š” { count: 0 }์ด๋ฉฐ ์‚ฌ์šฉ์ž๊ฐ€ this.setState()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ state.count๋ฅผ ์ฆ๊ฐ€์‹œํ‚ต๋‹ˆ๋‹ค. ์œ„์˜ ํด๋ž˜์Šค ์˜ˆ์‹œ๋ฅผ ํ•ด๋‹น ํŽ˜์ด์ง€์—์„œ ๊ณ„์† ์‚ฌ์šฉํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

์ฃผ์˜

์ข€ ๋” ํ˜„์‹ค์ ์ธ ์˜ˆ์‹œ๊ฐ€ ์•„๋‹Œ, counter ์˜ˆ์‹œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€ ๊ถ๊ธˆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. counter ์˜ˆ์‹œ๋ฅผ ์‚ฌ์šฉํ•œ ์ด์œ ๋Š”, Hook์„ ์ž˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๊ฐ€์žฅ ๊ธฐ์ดˆ์ ์ธ ๋‚ด์šฉ์ด ๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

Hook๊ณผ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ

React์˜ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” ์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

const Example = (props) => {
  // ์—ฌ๊ธฐ์„œ Hook์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!
  return <div />;
}

๋˜๋Š” ์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

function Example(props) {
  // ์—ฌ๊ธฐ์„œ Hook์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!
  return <div />;
}

ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ โ€œstate๊ฐ€ ์—†๋Š” ์ปดํฌ๋„ŒํŠธโ€๋กœ ์•Œ๊ณ  ์žˆ์—ˆ์„ ๊ฒ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ Hook์€ React state๋ฅผ ํ•จ์ˆ˜ ์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

Hook์€ ํด๋ž˜์Šค ์•ˆ์—์„œ ๋™์ž‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํด๋ž˜์Šค๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Hook์ด๋ž€?

React์˜ useState Hook์„ ์‚ฌ์šฉํ•ด๋ด…์‹œ๋‹ค!

import React, { useState } from 'react';
function Example() {
  // ...
}

Hook์ด๋ž€? Hook์€ ํŠน๋ณ„ํ•œ ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด useState๋Š” state๋ฅผ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ๋‹ค๋ฅธ Hook๋“ค์€ ๋‚˜์ค‘์— ์‚ดํŽด๋ด…์‹œ๋‹ค!

์–ธ์ œ Hook์„ ์‚ฌ์šฉํ• ๊นŒ? ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋˜ ์ค‘ state๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ”๊พธ๊ณค ํ–ˆ์„ ๊ฒ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด์ œ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ Hook์„ ์ด์šฉํ•˜์—ฌ state๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์˜

์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ Hook์„ ์‚ฌ์šฉํ•  ๋•Œ ๋ช‡ ๊ฐ€์ง€ ํŠน๋ณ„ํ•œ ๊ทœ์น™์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์— Hook์˜ ๊ทœ์น™์—์„œ ์‚ดํŽด๋ณด๋„๋ก ํ• ๊ฒŒ์š”!

state ๋ณ€์ˆ˜ ์„ ์–ธํ•˜๊ธฐ

ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, constructor ์•ˆ์—์„œ this.state๋ฅผ { count: 0 }๋กœ ์„ค์ •ํ•จ์œผ๋กœ์จ count๋ฅผ 0์œผ๋กœ ์ดˆ๊ธฐํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      count: 0    };  }

ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” this๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— this.state๋ฅผ ํ• ๋‹นํ•˜๊ฑฐ๋‚˜ ์ฝ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋Œ€์‹ , useState Hook์„ ์ง์ ‘ ์ปดํฌ๋„ŒํŠธ์— ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

import React, { useState } from 'react';

function Example() {
  // ์ƒˆ๋กœ์šด state ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , ์ด๊ฒƒ์„ count๋ผ ๋ถ€๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.  const [count, setCount] = useState(0);

useState๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์€ ๋ฌด์—‡์„ ํ•˜๋Š” ๊ฑธ๊นŒ์š”? โ€œstate ๋ณ€์ˆ˜โ€๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„์— ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” count๋ผ๊ณ  ๋ถ€๋ฅด์ง€๋งŒ banana์ฒ˜๋Ÿผ ์•„๋ฌด ์ด๋ฆ„์œผ๋กœ ์ง€์–ด๋„ ๋ฉ๋‹ˆ๋‹ค. useState๋Š” ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์˜ this.state๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ๊ณผ ๋˜‘๊ฐ™์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ผ๋ฐ˜ ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋๋‚  ๋•Œ ์‚ฌ๋ผ์ง€์ง€๋งŒ, state ๋ณ€์ˆ˜๋Š” React์— ์˜ํ•ด ์‚ฌ๋ผ์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

useState์˜ ์ธ์ž๋กœ ๋ฌด์—‡์„ ๋„˜๊ฒจ์ฃผ์–ด์•ผ ํ• ๊นŒ์š”? useState()Hook์˜ ์ธ์ž๋กœ ๋„˜๊ฒจ์ฃผ๋Š” ๊ฐ’์€ state์˜ ์ดˆ๊ธฐ ๊ฐ’์ž…๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์˜ state๋Š” ํด๋ž˜์Šค์™€ ๋‹ฌ๋ฆฌ ๊ฐ์ฒด์ผ ํ•„์š”๋Š” ์—†๊ณ , ์ˆซ์ž ํƒ€์ž…๊ณผ ๋ฌธ์ž ํƒ€์ž…์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์˜ˆ์‹œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ์–ผ๋งˆ๋‚˜ ๋งŽ์ด ํด๋ฆญํ–ˆ๋Š”์ง€ ์•Œ๊ธฐ๋ฅผ ์›ํ•˜๋ฏ€๋กœ 0์„ ํ•ด๋‹น state์˜ ์ดˆ๊ธฐ ๊ฐ’์œผ๋กœ ์„ ์–ธํ–ˆ์Šต๋‹ˆ๋‹ค. (2๊ฐœ์˜ ๋‹ค๋ฅธ ๋ณ€์ˆ˜๋ฅผ ์ €์žฅํ•˜๊ธฐ๋ฅผ ์›ํ•œ๋‹ค๋ฉด useState()๋ฅผ ๋‘ ๋ฒˆ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.)

useState๋Š” ๋ฌด์—‡์„ ๋ฐ˜ํ™˜ํ• ๊นŒ์š”? state ๋ณ€์ˆ˜, ํ•ด๋‹น ๋ณ€์ˆ˜๋ฅผ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜ ์ด ๋‘ ๊ฐ€์ง€ ์Œ์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ฐ”๋กœ const [count, setCount] = useState()๋ผ๊ณ  ์“ฐ๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค. ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์˜ this.state.count์™€ this.setState์™€ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ๋ฒ•์— ์ต์ˆ™ํ•˜์ง€ ์•Š๋‹ค๋ฉด ํ˜„์žฌ ํŽ˜์ด์ง€์˜ ๋์—์„œ ์‚ดํŽด๋ณผ๊ฒŒ์š”.

์ด์ œ useState๋ฅผ ์ด์šฉํ•˜์—ฌ ๋งŽ์€ ๊ฒƒ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import React, { useState } from 'react';

function Example() {
  // ์ƒˆ๋กœ์šด state ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , ์ด๊ฒƒ์„ count๋ผ ๋ถ€๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.  const [count, setCount] = useState(0);

count๋ผ๊ณ  ๋ถ€๋ฅด๋Š” state ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  0์œผ๋กœ ์ดˆ๊ธฐํ™”ํ•ฉ๋‹ˆ๋‹ค. React๋Š” ํ•ด๋‹น ๋ณ€์ˆ˜๋ฅผ ๋ฆฌ๋ Œ๋”๋งํ•  ๋•Œ ๊ธฐ์–ตํ•˜๊ณ , ๊ฐ€์žฅ ์ตœ๊ทผ์— ๊ฐฑ์‹ ๋œ ๊ฐ’์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. count ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ๊ฐฑ์‹ ํ•˜๋ ค๋ฉด setCount๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ฃผ์˜

์™œ createState๊ฐ€ ์•„๋‹Œ, useState๋กœ ์ด๋ฆ„์„ ์ง€์—ˆ์„๊นŒ์š”?

์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋งํ•  ๋•Œ ์˜ค์ง ํ•œ ๋ฒˆ๋งŒ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— โ€œCreateโ€๋ผ๋Š” ์ด๋ฆ„์€ ๊ฝค ์ •ํ™•ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์Œ ๋ Œ๋”๋ง์„ ํ•˜๋Š” ๋™์•ˆ useState๋Š” ํ˜„์žฌ state๋ฅผ ์ค๋‹ˆ๋‹ค. Hook ์ด๋ฆ„์ด ํ•ญ์ƒ use๋กœ ์‹œ์ž‘ํ•˜๋Š” ์ด์œ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. Hook์˜ ๊ทœ์น™์—์„œ ๋‚˜์ค‘์— ์‚ดํŽด๋ณด๋„๋ก ํ• ๊ฒŒ์š”.

state ๊ฐ€์ ธ์˜ค๊ธฐ

ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋Š” count๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด this.state.count๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

  <p>You clicked {this.state.count} times</p>

๋ฐ˜๋ฉด ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” count๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  <p>You clicked {count} times</p>

state ๊ฐฑ์‹ ํ•˜๊ธฐ

ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋Š” count๋ฅผ ๊ฐฑ์‹ ํ•˜๊ธฐ ์œ„ํ•ด this.setState()๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>    Click me
  </button>

๋ฐ˜๋ฉด ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” setCount์™€ count ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฏ€๋กœ this๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.

  <button onClick={() => setCount(count + 1)}>    Click me
  </button>

์š”์•ฝ

์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ํ•œ ์ค„ ํ•œ ์ค„ ์‚ดํŽด๋ณด๊ณ , ์–ผ๋งˆ๋‚˜ ์ดํ•ดํ–ˆ๋Š”์ง€ ์ฒดํฌํ•ด๋ด…์‹œ๋‹ค.

 1:  import React, { useState } from 'react'; 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0); 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }
  • ์ฒซ ๋ฒˆ์งธ ์ค„: useState Hook์„ React์—์„œ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
  • ๋„ค ๋ฒˆ์งธ ์ค„: useState Hook์„ ์ด์šฉํ•˜๋ฉด state ๋ณ€์ˆ˜์™€ ํ•ด๋‹น state๋ฅผ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜๊ฐ€ ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค. ๋˜ํ•œ, useState์˜ ์ธ์ž์˜ ๊ฐ’์œผ๋กœ 0์„ ๋„˜๊ฒจ์ฃผ๋ฉด count ๊ฐ’์„ 0์œผ๋กœ ์ดˆ๊ธฐํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์•„ํ™‰ ๋ฒˆ์งธ ์ค„: ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ ํด๋ฆญ์„ ํ•˜๋ฉด setCount ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ state ๋ณ€์ˆ˜๋ฅผ ๊ฐฑ์‹ ํ•ฉ๋‹ˆ๋‹ค. React๋Š” ์ƒˆ๋กœ์šด count ๋ณ€์ˆ˜๋ฅผ Example ์ปดํฌ๋„ŒํŠธ์— ๋„˜๊ธฐ๋ฉฐ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

๋งŽ์€ ๊ฒƒ๋“ค์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฒ˜์Œ์—๋Š” ๋‹ค์†Œ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„ค๋ช…์ด ์ดํ•ด๊ฐ€ ์ž˜ ์•ˆ ๋œ๋‹ค๋ฉด, ์œ„์˜ ์ฝ”๋“œ๋ฅผ ์ฒœ์ฒœํžˆ ๋‹ค์‹œ ์ฝ์–ด๋ณด์„ธ์š”. ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋˜ state ๋™์ž‘ ๋ฐฉ์‹์„ ์žŠ๊ณ , ์ƒˆ๋กœ์šด ๋ˆˆ์œผ๋กœ ์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ๋ถ„๋ช…ํžˆ ์ดํ•ด๊ฐ€ ๊ฐˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํŒ: ๋Œ€๊ด„ํ˜ธ๊ฐ€ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ์€ ๋ฌด์—‡์ผ๊นŒ์š”?

๋Œ€๊ด„ํ˜ธ๋ฅผ ์ด์šฉํ•˜์—ฌ state ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์„ ๋ณด์…จ์„ ๊ฒ๋‹ˆ๋‹ค.

  const [count, setCount] = useState(0);

๋Œ€๊ด„ํ˜ธ ์™ผ์ชฝ์˜ state ๋ณ€์ˆ˜๋Š” ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ์ด๋ฆ„์œผ๋กœ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  const [fruit, setFruit] = useState('banana');

์œ„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์€ โ€œ๋ฐฐ์—ด ๊ตฌ์กฐ ๋ถ„ํ•ดโ€๋ผ๊ณ  ํ•˜๊ณ , fruit๊ณผ setFruit, ์ด 2๊ฐœ์˜ ๊ฐ’์„ ๋งŒ๋“ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰, useState๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด fruit์ด๋ผ๋Š” ์ฒซ ๋ฒˆ์งธ ๊ฐ’๊ณผ setFruit๋ผ๋Š” ๋‘ ๋ฒˆ์งธ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ์ฝ”๋“œ์™€ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  var fruitStateVariable = useState('banana'); // ๋‘ ๊ฐœ์˜ ์•„์ดํ…œ์ด ์žˆ๋Š” ์Œ์„ ๋ฐ˜ํ™˜
  var fruit = fruitStateVariable[0]; // ์ฒซ ๋ฒˆ์งธ ์•„์ดํ…œ
  var setFruit = fruitStateVariable[1]; // ๋‘ ๋ฒˆ์งธ ์•„์ดํ…œ

useState๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋ฉด 2๊ฐœ์˜ ์•„์ดํ…œ ์Œ์ด ๋“ค์–ด์žˆ๋Š” ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ์•„์ดํ…œ์€ ํ˜„์žฌ ๋ณ€์ˆ˜๋ฅผ ์˜๋ฏธํ•˜๊ณ , ๋‘ ๋ฒˆ์งธ ์•„์ดํ…œ์€ ํ•ด๋‹น ๋ณ€์ˆ˜๋ฅผ ๊ฐฑ์‹ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ๋ฐฐ์—ด ๊ตฌ์กฐ ๋ถ„ํ•ด๋ผ๋Š” ํŠน๋ณ„ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•ด์ฃผ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— [0]์ด๋‚˜ [1]๋กœ ๋ฐฐ์—ด์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ์€ ์ข‹์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์˜

this๋ฅผ React์— ์•Œ๋ฆฌ์ง€ ์•Š์•˜๋Š”๋ฐ, ์–ด๋–ป๊ฒŒ React๊ฐ€ ํŠน์ • ์ปดํฌ๋„ŒํŠธ์—์„œ useState๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒƒ์„ ์•„๋Š” ์ง€ ๊ถ๊ธˆํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์งˆ๋ฌธ๊ณผ ๋‹ค๋ฅธ ๊ถ๊ธˆ ์‚ฌํ•ญ๋“ค์€ ๋‚˜์ค‘์— ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

ํŒ: ์—ฌ๋Ÿฌ ๊ฐœ์˜ state ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ

[something, setSomething]์˜ ์Œ์ฒ˜๋Ÿผ state ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์€ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ๊ฐ๊ฐ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ์ค„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

function ExampleWithManyStates() {
  // ์—ฌ๋Ÿฌ ๊ฐœ์˜ state๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

์œ„์˜ ์ฝ”๋“œ๋Š” age, fruit, todos๋ผ๋Š” ์ง€์—ญ ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ง€๋ฉฐ ๊ฐœ๋ณ„์ ์œผ๋กœ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  function handleOrangeClick() {
    // this.setState({ fruit: 'orange' })์™€ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋ƒ…๋‹ˆ๋‹ค.
    setFruit('orange');
  }

์—ฌ๋Ÿฌ ๊ฐœ์˜ state ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค. state ๋ณ€์ˆ˜๋Š” ๊ฐ์ฒด์™€ ๋ฐฐ์—ด์„ ์ž˜ ๊ฐ€์ง€๊ณ  ์žˆ์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์„œ๋กœ ์—ฐ๊ด€์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฌถ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์˜ this.setState์™€ ๋‹ฌ๋ฆฌ state๋ฅผ ๊ฐฑ์‹ ํ•˜๋Š” ๊ฒƒ์€ ๋ณ‘ํ•ฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋Œ€์ฒดํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋…๋ฆฝ์ ์ธ state ๋ณ€์ˆ˜ ๋ถ„ํ• ์— ๋Œ€ํ•œ ์ถ”๊ฐ€์ ์ธ ๊ถŒ์žฅ ์‚ฌํ•ญ์„ ์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ์—์„œ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ.

๋‹ค์Œ ๋‹จ๊ณ„

์ด๋ฒˆ ํŽ˜์ด์ง€์—์„œ React์˜ Hook ์ค‘ ํ•˜๋‚˜์ธ useState์— ๋Œ€ํ•ด ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. useState๋ฅผ ์ด์šฉํ•˜๋ฉด ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ state๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Hook์€ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์—์„œ React์˜ ํŠน์ง•์„ ๊ฐ–๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. Hook์€ ํ•ญ์ƒ use๋ผ๋Š” ํ‚ค์›Œ๋“œ๋กœ ์‹œ์ž‘ํ•˜๋ฉฐ useState ์ด์™ธ์— ์•„์ง ๋ณด์ง€ ๋ชปํ•œ ๋งŽ์€ Hook๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ๊ฐ•์ขŒ๋ฅผ ์ด์–ด์„œ ํ•ฉ์‹œ๋‹ค. ๋‹ค์Œ Hook ๊ฐ•์ขŒ: useEffect. ๋‹ค์Œ์— ๋ฐฐ์šธ Hook์€ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ๋ช…์ฃผ๊ธฐ์™€ ๋น„์Šทํ•œ ํผํฌ๋จผ์Šค๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Is this page useful?Edit this page