[React] useState 사용

useState()

class를 기반으로 한 class component를 이용하여 state를 관리 하는 방법도 있지만
복잡한 class component가 아닌 함수형 component에서도 state관리를 할 수 있게 만들어주는

useState()의 사용법을 정리해보려 한다.

 

 

class함수 안에서 state를 사용하는 것과 마찬가지로

state는 react의 변수 대신 쓰는 데이터의 저장 공간이다.

state는 변경되면 HTML이 새로고침 없이 리렌더링이 된다.

 

import React, { useState } from 'react';

useState는 기본적으로 상단에 react와 함께 Import하여 사용할 수 있다.

 

[name, setName] = useState('Jay');

'Jay'라는 데이터를 사용하기 위해서는 위와 같은 문법 구조를 가진다.

 

useState를 사용 할 때에는 첫번째는 현재상태, 두번째는 상태 값을 업데이트 해 줄 setter함수를 적어준다.
useState('Jay'); 뒤에는 array를 변경할 함수가 하나 숨겨져 있다고 생각하면 된다.)

 

let [first, second] = ['Jay', 'Anna']

이렇게 써주면 first는 'Jay', second는 'Anna'의 변수가 되는 것과 마찬가지로 useState도 이와같은 방식으로

사용한다고 생각하면 이해하기가 쉽다. *ES6 문법

 

 

State 업데이트.

function App() {

  let [title, setTitle] = useState(['Iron-man', 'Thor', 'Hulk']);
  
  return (
    <div className="App">
       <h1>{ title[0] }</h1>
    </div>
  );
}

{ title[0] } 을 하면 title state의 'Iron-man'을 가져올 수 있다.

 

버튼을 클릭하면 count되는 함수를 만들어보자.

function App() {

  let [like, setLike] = useState(0);
  
  return (
    <div className="App">
       <h1>{ title[0] }<button onClick={ ()=>{ setLike(like+1)} }>UP</button> {like}</h1>
    </div>
  );
}

button의 onClick속성과 화살표 함수를 이용하여 함수를 넣어주었다.

위와 같이 뒤에 적은 setLike 함수를 이용하여 like의 state를 변경해준다.
데이터가 새로 대체되어 업데이트된다고 생각하면된다.

 

 

 

state에 할당된 array의 데이터를 변경하고 싶다면?

let [title, setTitle] = useState(['Iron-man', 'Thor', 'Hulk']);
title[0] = "Spider-man"  //이렇게 사용하면 안됨

array에 있는 데이터를 변경하려면 title[0] = "Spider-man" 와 같이 직접 설정을 하면 안되고

뒤에 적은 setTitle으로 변경을 해주어야 한다.
* useState는 할당된 값을 새로 전부 교체해주는 개념이기 때문.

function App() {

  let [title, setTitle] = useState(['Iron-man', 'Thor', 'Hulk']);
  
   function clickBtn(){
    let newArray = [...title]; // deep copy
    newArray[0] = 'Spider-man'; // 0번 index에 할당
    setTitle(newArray); // copy된 값으로 변경
  }
  
  return (
    <div className="App">
       <button onClick={ clickBtn }>Change</button> //버튼 클릭 시 clickBtn호출
       <h1>{ title[0] }</h1> // 변경된 Spider-man이 보여짐
    </div>
  );
}

state는 직접 수정하지 않고 복사해서 수정하는 방식을 사용한다.

참조값들은 변수가 객체의 주소를 가르키는 값이 되는 특징이 있는데,
let newArray = title을 해버리면 원래의 값과 복사된 값이 공유가 되버린다.

그래서 spread문법 [...title]으로 값 공유가 되지 않는 deep copy를 해줘야 한다.

 

 

요약

** state는 react의 변수 대신 쓰는 데이터의 저장 공간이다.

** state는 변경되면 HTML이 새로고침 없이 리렌더링이 된다.

** state는 직접적으로 수정할 경우 리렌더링이 되지 않는다.

** useState는 지정한 setter함수를 사용하여 데이터를 업데이트한다.

** Array, Ovject data의 state변경 시 spread문법 [...array]를 사용하여 기존 객체를 복사하여

새로운 객체를 만들고 그 새로운 객체를 사용하여 상태를 업데이트 해준다.