[React] 2. state (변수, array, object) Kassid

728x90

이전 글 ▼

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

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'

이 문법을 복사에 활용하면 위에서의 코드와 같이

[...복사대상] 의 형태로 사용한다.

이는 복사할 자료의 괄호를 벗기고 다시 씌워달라는 의미를 가진다.

즉, 새로운 객체로 인식을 시키는 것이다.

따라서 이를 이용하여 값만을 복사하는 깊은 복사를 구현할 수 있다.

저작자표시

'🌌 | WEB DEV > React' 카테고리의 다른 글

[React] 4. 동적인 UI 제작하기 (0)	2023.05.28
[React] 3. 컴포넌트 (Component) (0)	2023.05.28
[React] 2-1. array state 정렬하기 ( .sort()활용) (0)	2023.05.27
[React] 1. JSX (0)	2023.05.07
[React] 0. React를 사용하는 이유 & 초기 세팅 (0)	2023.05.05

[React] 2. state (변수, array, object)

1. state

자료 저장 방법_1) 변수를 이용한다.

자료 저장 방법_2) state를 이용한다.

2. state 변경 함수

array, object state를 변경할 때

state 변경 동작원리

※ spread operator[...~]

'🌌 | WEB DEV > React' 카테고리의 다른 글

댓글

티스토리툴바

[React] 2. state (변수, array, object)

1. state

자료 저장 방법_1) 변수를 이용한다.

자료 저장 방법_2) state를 이용한다.

2. state 변경 함수

array, object state를 변경할 때

state 변경 동작원리

※ spread operator[...~]

'🌌 | WEB DEV > React' 카테고리의 다른 글

관련글

댓글

티스토리툴바