๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/React

[React] 2. state (๋ณ€์ˆ˜, array, object)

by KASSID 2023. 5. 26.

๋ชฉ์ฐจ

    728x90

    ์ด์ „ ๊ธ€ โ–ผ

     

     

    1. state

    React์˜ JSX๋ฅผ ์ด์šฉํ•˜์—ฌ ํ…œํ”Œ๋ฆฟ์„ ์ž‘์„ฑํ•  ๋•Œ ์ค‘์š”ํ•œ ์ž๋ฃŒ๋“ค์„ ์ž ์‹œ ์ €์žฅํ•ด์•ผํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. 

     

    ์ž๋ฃŒ ์ €์žฅ ๋ฐฉ๋ฒ•_1) ๋ณ€์ˆ˜๋ฅผ ์ด์šฉํ•œ๋‹ค.

    let, const ๋“ฑ์„ ํ™œ์šฉํ•œ๋‹ค.

    functoin App(){
      
      let name = "Kassid"
      
      return (
        <div className="App">
          ...
        </div>
      );
    }

     

    ์ž๋ฃŒ ์ €์žฅ ๋ฐฉ๋ฒ•_2) state๋ฅผ ์ด์šฉํ•œ๋‹ค.

    ๋ณ€์ˆ˜ ์™ธ์—๋„ state๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ž๋ฃŒ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ๋จผ์ € useState๋ฅผ importํ•œ๋‹ค.

    import { useState } from 'react';

     

    App( ) ๋‚ด์—์„œ state๋ฅผ ์ •์˜ํ•œ๋‹ค.

    let [state๋ช…, state ๋ณ€๊ฒฝํ•จ์ˆ˜๋ช…] = useState(์ดˆ๊ธฐ๊ฐ’);

    useState(๊ฐ’)์€ [๊ฐ’, ๊ฐ’๋ณ€๊ฒฝ์„ ๋„์™€์ฃผ๋Š” ํ•จ์ˆ˜]์˜ ํ˜•ํƒœ๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

    ์ด๋ฅผ destructuring ๋ฌธ๋ฒ•์œผ๋กœ ์ง€์ •ํ•œ ๋ณ€์ˆ˜๋ช…๊ณผ ํ•จ์ˆ˜๋ช…์— ๊ฐ๊ฐ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

     

    functoin App(){
      let [name, setName] = "Kassid"
      
      return (
        <div className="App">
          ...
        </div>
      );
    }

     

    ์—ฌ๊ธฐ๊นŒ์ง€๋Š” ๋‘ ๋ฐฉ๋ฒ•์— ๋ณ„ ์ฐจ์ด๊ฐ€ ์—†์–ด ๋ณด์ธ๋‹ค.

    ๊ทธ๋ ‡๋‹ค๋ฉด ๊ตณ์ด ์™œ state๋ฅผ ์จ์•ผํ• ๊นŒ?

     

    state์™€ ๋ณ€์ˆ˜์˜ ์ฐจ์ด์ 

    ์ผ๋ฐ˜ ๋ณ€์ˆ˜๋Š” ๊ฐ’์„ ๋ณ€๊ฒฝํ•œ๋‹ค๋ฉด html์— ์ž๋™ ๋ฐ˜์˜์ด ์•ˆ ๋œ๋‹ค.

    ํ•˜์ง€๋งŒ state๋Š” ๋ณ€๊ฒฝ ์‹œ html์ด ์ž๋™ ๋ Œ๋”๋ง์ด ๋œ๋‹ค.

     

    ๋”ฐ๋ผ์„œ ๊ฐ’ ๋ณ€๋™ ์‹œ ์ž๋™์œผ๋กœ html์— ๋ฐ˜์˜์ด ๋˜๋„๋ก ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ state๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

    (์ž˜ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฑด ๊ตณ์ด ํ•  ํ•„์š” ์—†๊ณ , ๋ฐ”๋€” ๊ฒƒ๋“ค์„ ์ง€์ •ํ•ด๋ณด์ž!)

     

    App.js

     

     

    const author = "KASSID";
    
    function App() {
      let [music, setMusic] = useState(
        [{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
        {"type": "HipHop", "title": "๊ทธ ํ•ด ์—ฌ๋ฆ„", "singer": "์œ ํ† "},
        {"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
        )
    
      function setTypeImg(v){
        switch (v) {
          case "Rock":
            return guitar;
          break;
          case "HipHop":
            return hiphop;
          break;
          case "Dance":
            return dance;
          break;
    
        default:
          break;
      }};
      return (
        <div className="App">
          <div className="wrap">
            <div className="nav-container">
              <div className="nav">
                <div className="logo-container">
                  <img className="logo" src={logo} alt="logo" />
                </div>
                <h1>{author} MUSIC</h1>
              </div>
            </div>
            <div className="music-list-container">
    
              {/* 1 */}
              <div className="music-list">
                <div className="music-type">
                  <img className="music-type-img" src={setTypeImg(music[0].type)} alt="" />
                  <span className="music-type-desc">
                  {music[0].type}
                  </span>
                </div>
                <div className="music-info-container">
                  <div className="music-info">
                    <h3 className="music-title">{music[0].title}</h3>
                    <span className="music-singer">{music[0].singer}</span>
                  </div>
                  <div className="music-stream-container">
                    <a href="."><img src={youtube} alt="" /></a>
                    <a href="."><img src={spotify} alt="" /></a>
                    <a href="."><img src={apple} alt="" /></a>
                  </div>
                </div>
              </div>
    
              {/* 2 */}
              <div className="music-list">
                <div className="music-type">
                  <img className="music-type-img" src={setTypeImg(music[1].type)} alt="" />
                  <span className="music-type-desc">
                    HipHop
                  </span>
                </div>
                <div className="music-info-container">
                  <div className="music-info">
                    <h3 className="music-title">{music[1].title}</h3>
                    <span className="music-singer">{music[1].singer}</span>
                  </div>
                  <div className="music-stream-container">
                    <a href="."><img src={youtube} alt="" /></a>
                    <a href="."><img src={spotify} alt="" /></a>
                    <a href="."><img src={apple} alt="" /></a>
                  </div>
                </div>
              </div>
    
    
              {/* 3 */}
              <div className="music-list">
                <div className="music-type">
                  <img className="music-type-img" src={setTypeImg(music[2].type)} alt="" />
                  <span className="music-type-desc">
                    Dance
                  </span>
                </div>
                <div className="music-info-container">
                  <div className="music-info">
                    <h3 className="music-title">{music[2].title}</h3>
                    <span className="music-singer">{music[2].singer}</span>
                  </div>
                  <div className="music-stream-container">
                    <a href="."><img src={youtube} alt="" /></a>
                    <a href="."><img src={spotify} alt="" /></a>
                    <a href="."><img src={apple} alt="" /></a>
                  </div>
                </div>
              </div>
    
            </div>
          </div>
        </div>
      );
    }

     

     


    2. state ๋ณ€๊ฒฝ ํ•จ์ˆ˜

    state๋ฅผ ๋ณ€๊ฒฝํ• ๋•Œ๋Š” ๊ผญ state๋ณ€๊ฒฝํ•จ์ˆ˜๋ฅผ ์จ์•ผํ•œ๋‹ค.

     useState()์—์„œ ๋‘ ๋ฒˆ์งธ ๋ฐ˜ํ™˜๊ฐ’์ด ๋ฐ”๋กœ ์ด๊ฒƒ์ด๋‹ค.

    let [a, setA] = useState(0);

    ๋”ฐ๋ผ์„œ ์œ„ ์˜ˆ์‹œ์™€ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ๊ฐ’์„ ํ• ๋‹นํ•  ๊ฒฝ์šฐ setA๋Š” useState()๋กœ ๋ถ€ํ„ฐํ•จ์ˆ˜๋ช…์„ ๋ฐ›์•˜๊ธฐ ๋•Œ๋ฌธ์— setA()๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

    ์ด ํ•จ์ˆ˜๋Š” setA( ๋ณ€๊ฒฝํ•  state )์˜ ํ˜•ํƒœ๋กœ 

     

     

    state ๋ณ€๊ฒฝ์˜ ์˜ˆ์‹œ๋กœ ์ข‹์•„์š” ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์–ด ๋ณด์ž!

    JSX์—์„œ ํƒœ๊ทธ์˜ ํด๋ฆญ ์ด๋ฒคํŠธ๋Š” onClick={ ํ•จ์ˆ˜ }๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

    let [thumbs, setThumbs] = useState(0);
    
    ...
    
    <div className="music-thumbs-container">
      <span onClick={()=>{ setThumbs(thumbs+1) }}>๐Ÿ‘ ์ข‹์•„์š”</span>
      <span>{thumbs}</span>
    </div>

    ์œ„์™€ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ state๋ฅผ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ๋˜ํ•œ state๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ์žฌ๋ Œ๋”๋ง์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์—๋„ ํ•ด๋‹น ์ •๋ณด๊ฐ€ ๋ฐ˜์˜์ด ๋œ๋‹ค.

     

    ๊ฒฐ๊ณผํ™”๋ฉด

     

     

    array, object state๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ

    ๊ฐ„๋‹จํ•œ ๋ณ€์ˆ˜๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ array, object๋ฅผ ๋ณ€๊ฒฝํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ?

     

    1) ์ง์ ‘ ๋ฐ”๊พธ๋Š” ๋ฐฉ๋ฒ•

    ...
    
    let [music, setMusic] = useState(
      [{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
      {"type": "HipHop", "title": "๊ทธ ํ•ด ์—ฌ๋ฆ„", "singer": "์œ ํ† "},
      {"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
      )
        
        
      return(
        <button onClick={()=>{setMusic(
          [{"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"},
          {"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
          {"type": "HipHop", "title": "๊ทธ ํ•ด ์—ฌ๋ฆ„", "singer": "์œ ํ† "}]
        )}}>
      )
        
    ...

    ๊ธฐ์กด state๋‚ด ์ฝ˜ํ…์ธ ๋ฅผ ๋ณ€๊ฒฝํ•ด๋ณด๋Š” ์˜ˆ์‹œ์ด๋‹ค.

    ์œ„ ๋ฐฉ๋ฒ•์€ ์ง์ ‘ ๊ทธ ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•œ ๊ฒƒ์„ state๋ณ€๊ฒฝ ํ•จ์ˆ˜์— ์ „๋‹ฌํ•˜์—ฌ ๊ตฌํ˜„ํ•œ๋‹ค.

    ๋‹น์—ฐํžˆ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜์ง€๋งŒ ๋งŒ์•ฝ ๊ทธ ์–‘์ด ๋ฐฉ๋Œ€ํ•˜๋‹ค๋ฉด ์ด๊ฒƒ๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ๋‹ค ์ ์„ ์ˆ˜๋Š” ์—†๋Š” ๋…ธ๋ฆ‡์ด๋‹ค.

     

     

    2) ๋ฉ”์„œ๋“œ ํ™œ์šฉ

    ...
    
    let [music, setMusic] = useState(
      [{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
      {"type": "HipHop", "title": "๊ทธ ํ•ด ์—ฌ๋ฆ„", "singer": "์œ ํ† "},
      {"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
      )
        
        
      return(
        <button onClick={()=>{
          let copy = [...music];
          copy.unshift(copy.pop());
          setMusic(copy);
        }}>UPDATE</button>
      )
        
    ...

     

    ์ด์ฒ˜๋Ÿผ ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๊ฐ„ํŽธํ•˜๊ฒŒ array๋‚˜ object state๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ๊ฒฐ๊ณผํ™”๋ฉด

     

    state ๋ณ€๊ฒฝ ๋™์ž‘์›๋ฆฌ

    ์ง์ „ ์ฝ”๋“œ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด๋ฉด copy๋ผ๋Š” ๋ณ€์ˆ˜์— ๊ธฐ์กด state๋ฅผ ํ• ๋‹นํ•˜๋Š”๋ฐ,

    ์ด๋•Œ [...state] ํ˜•ํƒœ๋กœ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

    ์ด๊ฒƒ์— ๋Œ€ํ•ด์„œ ์กฐ๊ธˆ ์•Œ์•„๋ณด์ž.

     

    ...
    
    let [music, setMusic] = useState(
      [{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
      {"type": "HipHop", "title": "๊ทธ ํ•ด ์—ฌ๋ฆ„", "singer": "์œ ํ† "},
      {"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
      )
        
        
      return(
        <button onClick={()=>{
          let copy = music; // ๋‹จ์ˆœ ํ• ๋‹น
          copy.unshift(copy.pop());
          setMusic(copy);
        }}>UPDATE</button>
      )
        
    ...

    ๋‹จ์ˆœํžˆ ํ• ๋‹นํ•  ๊ฒฝ์šฐ ์–•์€ ๋ณต์‚ฌ๊ฐ€ ์ผ์–ด๋‚œ๋‹ค.

    ์ด ๊ฒฝ์šฐ ๋‘ ๋ณ€์ˆ˜๊ฐ€ ์‹ค์ œ ๊ฐ’์ด ๋“ค์–ด์žˆ๋Š” Ram์˜ ์ฃผ์†Œ๋ฅผ ํ•จ๊ป˜ ๊ฐ€๋ฆฌํ‚ค๋Š” ํ˜•ํƒœ๋ฅผ ๊ฐ€์ง„๋‹ค.

    ๋”ฐ๋ผ์„œ copy์™€ ๊ธฐ์กด state๊ฐ€ ๊ฐ™์€ ๊ฒƒ์œผ๋กœ ์ธ์‹ํ•˜๊ธฐ ๋•Œ๋ฌธ์— state ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค.

     

    let arr1 = ['a', 'b'];
    let arr2 = arr1;	// ์–•์€ ๋ณต์‚ฌ
    arr2[0] = 'c';
    console.log(arr1, arr2);
    console.log(arr1 === arr2);
    
    >>> ['c', 'b'] ['c', 'b']
    >>> true	// ๊ฐ™์€ ๊ฒƒ์œผ๋กœ ์ธ์‹

    === ์—ฐ์‚ฐ์ž๋กœ๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€

    spread operator[...~] ์ด๋‹ค.

     

    โ€ป spread operator[...~]

    array ํ˜น์€ object ์ž๋ฃŒํ˜•์˜ ์™ผ์ชฝ์— ์  3๊ฐœ๋ฅผ ๋ถ™์ด๋Š” ๊ฒƒ์ด๊ณ ,

    ๊ด„ํ˜ธ๋ฅผ ๋ฒ—๊ฒจ๋‚ด๋Š” ๊ธฐ๋Šฅ์„ ํ•œ๋‹ค.

        ex) ...['a', 'b'] === 'a', 'b'

     

    ์ด ๋ฌธ๋ฒ•์„ ๋ณต์‚ฌ์— ํ™œ์šฉํ•˜๋ฉด ์œ„์—์„œ์˜ ์ฝ”๋“œ์™€ ๊ฐ™์ด

    [...๋ณต์‚ฌ๋Œ€์ƒ] ์˜ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

    ์ด๋Š” ๋ณต์‚ฌํ•  ์ž๋ฃŒ์˜ ๊ด„ํ˜ธ๋ฅผ ๋ฒ—๊ธฐ๊ณ  ๋‹ค์‹œ ์”Œ์›Œ๋‹ฌ๋ผ๋Š” ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„๋‹ค.

    ์ฆ‰, ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋กœ ์ธ์‹์„ ์‹œํ‚ค๋Š” ๊ฒƒ์ด๋‹ค.

     

    ๋”ฐ๋ผ์„œ ์ด๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฐ’๋งŒ์„ ๋ณต์‚ฌํ•˜๋Š” ๊นŠ์€ ๋ณต์‚ฌ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

     

     

     

    ๋Œ“๊ธ€