FrontEnd

[React] ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ์ƒํƒœ๊ด€๋ฆฌ Hooks useState ์‚ฌ์šฉ๋ฒ• ์•Œ์•„๋ณด๊ธฐ

FrontEnd ๊น€ํ‰๋ฒ”๋‹˜ 2021. 10. 20. 21:50
๋ฐ˜์‘ํ˜•

react useState ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ์˜ˆ์‹œ ์ฝ”๋“œ

๐ŸŸReact Hooks์ด๋ž€?

Hooks์€ ๋ฆฌ์•กํŠธ 16.8 ๋ฒ„์ „์—์„œ ์ƒˆ๋กœ ๋„์ž…๋œ ์ƒํƒœ ๊ด€๋ฆฌ ๊ธฐ๋Šฅ์ด๋‹ค.

๊ธฐ์กด์˜ ํ•จ์ˆ˜ํ˜•์ฝ”๋“œ์—์„œ๋Š” ๊ด€๋ฆฌํ•˜์ง€ ๋ชปํ–ˆ๋˜ ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ Hooks์„ ํ†ตํ•ด์„œ ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค.

React Native์˜ ๊ฒฝ์šฐ์—๋Š” 0.59 ๋ฒ„์ „๋ถ€ํ„ฐ Hook์„ ์ง€์›ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

 

React์—์„œ๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์™€ Classํ˜• ์ปดํฌ๋„ŒํŠธ ๋‘ ๊ฐ€์ง€ ํ˜•ํƒœ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š”๋ฐ,

๊ธฐ์กด์˜ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” React State์˜ ์ƒ๋ช…์ฃผ๊ธฐ ๊ธฐ๋Šฅ์„ ์ด์šฉํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.

 

ํ•˜์ง€๋งŒ hooks ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜๋ฉด์„œ ์ด์ œ๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์ƒ๋ช…์ฃผ๊ธฐ ๊ธฐ๋Šฅ์„ ์—ฐ๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

Hooks์€ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค.

 

hooks ์—…๋ฐ์ดํŠธ ์ดํ›„์—๋„ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅ ๋•Œ๋ฌธ์—,

Hooks์˜ ๊ธฐ๋Šฅ์„ ์œ„ํ•ด์„œ ๊ธฐ์กด ์ฝ”๋“œ๋ฅผ ๋ชจ๋‘ ๋ฐ”๊พธ๋Š” ๊ฒƒ์€ ๊ถŒ์žฅํ•˜์ง€ ์•Š๊ณ 

์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ๋ถ€ํ„ฐ Hooks์„ ์ด์šฉํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

 

 

๐Ÿ‘“useState

useState๋Š” ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ hook์ด๋‹ค.

ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ์ด์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋žœ๋”๋ง์ด ๋˜์–ด๋„ state๊ฐ’์ด ๊ทธ๋Œ€๋กœ ์œ ์ง€๋œ๋‹ค.

useState๋Š” ํ˜„์žฌ์˜ ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๊ธฐ๋Šฅ๊ณผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์Œ์œผ๋กœ ์ œ๊ณตํ•œ๋‹ค.

ํ•ด๋‹น ํ•จ์ˆ˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์—์„œ ํ˜ธ์ถœ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

 

๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์ˆซ์ž ๊ฐ’์„ ์นด์šดํ„ฐ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ๋‹ค.

 

Counter.js 

import React, {useState} from 'react';

const Counter = ()=> {
  //counter๋ผ๋Š” ์ƒˆ ์ƒํƒœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ๋‹ค.
  const [counter, setCounter] = useState(0);

  return (
      <div>
        <p> ํ˜„์žฌ์นด์šดํŠธ <b>{counter}</b></p>
        <button onClick={()=>setCounter(counter+1)}>+1</button>
        <button onClick={()=>setCounter(counter-1)}>-1</button>
      </div>
  )
};

export default Counter;

useState๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด import ๊ตฌ๋ฌธ์— useState๋ฅผ ์ž…๋ ฅํ•ด์ค˜์•ผ ํ•œ๋‹ค.

์ฒซ ๋ฒˆ์งธ ์ง€์ •๋œ counter๋Š” ์›์†Œ์˜ ์ƒํƒœ ๊ฐ’์„ ์ €์žฅํ•˜๋ฉฐ

๋‘ ๋ฒˆ์งธ ์ €์žฅ๋œ setCounter๋ผ๋Š” ์›์†Œ๋Š” ์ƒํƒœ๋ฅผ ์„ค์ •ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

 

useState()์—์„œ๋Š” ์ธ์ž๋กœ ์ดˆ๊ฐ’ State๊ฐ’์„ ํ•˜๋‚˜ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š”๋ฐ

์œ„ ์ฝ”๋“œ๋Š” 0์„ ๋„ฃ์–ด์ค˜์„œ counter์— ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ 0์„ ์„ธํŒ…ํ•ด ์ฃผ์—ˆ๋‹ค.

 

ํ™”๋ฉด์ƒ์—์„œ๋Š” counter ํ•จ์ˆ˜๋ฅผ ๊ฐ€์ ธ์™€์„œ ํ˜„์žฌ ์ƒํƒœ ๊ฐ’์„ ํ™”๋ฉด์— ๋ณด์—ฌ์ฃผ๊ณ 

click ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์—์„œ๋Š” setCounter๋ฅผ ์ด์šฉํ•ด์„œ counter ๊ฐ’์„ ๋”ํ•˜๊ณ  ๋นผ์ฃผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค.

 

 

App.js

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


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

export default App;

์œ„ ์ฝ”๋“œ ์ž‘์„ฑ์ด ์™„๋ฃŒ๊ฐ€ ๋˜์—ˆ๋‹ค๋ฉด app.js์— ๋งŒ๋“ค์–ด์ง„ Counter.js๋ฅผ import ์‹œํ‚จ ๋’ค ๋ Œ๋”๋ง ์‹œ์ผœ์ค€๋‹ค.

 

React๋กœ ๋งŒ๋“  Counter

 

๐Ÿ‘จ‍๐Ÿ‘ฉ‍๐Ÿ‘ง‍๐Ÿ‘ฆ์—ฌ๋Ÿฌ State ๋ณ€์ˆ˜ ์„ ์–ธํ•˜๊ธฐ

์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ useState๋Š” ์—ฌ๋Ÿฌ ๋ฒˆ ์„ ์–ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

๋˜ํ•œ ์ดˆ๊ธฐ ๊ฐ’์œผ๋กœ๋Š” ์•„๊นŒ์ฒ˜๋Ÿผ ์ˆซ์ž๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ฌธ์ž, ๊ทธ๋ฆฌ๊ณ  ๋ฐฐ์—ด์„ ๋„ฃ๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

Counter.js

import React, {useState} from 'react';

const Counter = () => {
    const [counter, setCounter] = useState(0);
    const [name] = useState('ORDINARY Code');
    const [list] = useState([{text: '์ƒ˜ํ”Œ์ฝ”๋“œ', category: 'React'}]);

    return (
        <div>
            <p>๋ธ”๋กœ๊ทธ๋ช… : {name}</p>
            <p>๋ธ”๋กœ๊ทธ๋ฆฌ์ŠคํŠธ</p>
            <ul>
                {list.map((text, index)=> (
                <li key={index}>[{text.category}] {text.text}</li>
                ))}
            </ul>
            <p> ํ˜„์žฌ์นด์šดํŠธ <b>{counter}</b></p>
            <button onClick={() => setCounter(counter + 1)}>+1</button>
            <button onClick={() => setCounter(counter - 1)}>-1</button>

        </div>
    )
};

export default Counter;

๊ธฐ์กด์— ์ž‘์„ฑํ•œ Counter.js์— name๊ณผ list๋ผ๋Š” useState๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค. 

๊ธฐ๋ณธ์ ์œผ๋กœ useState์—์„œ๋Š” ํ•˜๋‚˜์˜ ์ƒํƒœ ๊ฐ’๋งŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ƒํƒœ ๊ฐ’์„ ๊ด€๋ฆฌํ•˜๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ useState๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

 

์ดˆ๊ธฐ๊ฐ’์œผ๋กœ๋Š” ํ…์ŠคํŠธ์™€ ๋ฐฐ์—ด์„ ๋„ฃ์–ด์ค€ ๋’ค, ๋‹ค์‹œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋žœ๋”๋ง ํ•ด๋ณด์ž

useState ์—ฌ๋Ÿฌ๋ฒˆ ์‚ฌ์šฉํ•˜๊ธฐ

์ƒˆ๋กœ ์ถ”๊ฐ€ํ•œ useState์—์„œ ๋„ฃ์–ด์ค€ ์ดˆ๊ธฐ๊ฐ’๋“ค์ด ์ž˜ ๋ณด์ด๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฐ˜์‘ํ˜•
1 2 3 4 5 6 7 ··· 50