state를 이용한 데이터 바인딩

새로고침 없이 데이터를 변동하고 싶을 경우, 해당 데이터는 useState( )를 이용하여 바인딩되어야 한다. 그 방법은 다음과 같다.

import React, { useState } from 'react';
import './App.css';

function App() {

  let [title, setTitle] = useState('state 바인딩이란?');
  let [liked, setLiked] = useState(0);

  return (
    <div className="App">
      <ul className="list">
        <li>
            { title }
            <button onClick={ ( )=>{ setLiked( liked + 1 ) } }>♥ { liked }</button>
        </li>
      </ul>
    </div>
  );
}

export default App;

1. useState( )를 사용할 것임을 선언

import React from 'react'; // before

import React, { useState } from 'react';

2. useState( )를 이용하여 데이터를 변수에 담기

let [title, setTitle] = useState('state 바인딩이란?');

useState( )를 사용하면, Array의 형태로 array[0]에는 데이터가 array[1]에는 데이터를 변경해주는 function이 자동으로 생성된다. 이에 es6 문법, 구조 분해 할당(?)을 이용해 각 변수에 담은 것이다.

 

+ es6의 구조 분해 할당이란?

구조 분해 할당 - JavaScript | MDN

3. 담은 변수를 사용하여 바인딩

<ul className="list">
   <li>
      { title }
   </li>
</ul>

4. 변경함수를 이용해, state 값을 변경: button을 누를 때마다 liked 값을 +1

4.0. stata에 변수를 담고,

let [liked, setLiked] = useState(0);

4.1. onClick에 직접 함수 삽입

<button onClick={ ( )=>{ setLiked( liked + 1 ) } }>♥ { liked }</button>

4.2. 함수 선언 후 onClick에 추가 

function App() {
  let [title, setTitle] = useState('state 바인딩이란?');
  let [liked, setLiked] = useState(0);
  let funcLike = () => {
    setLiked( liked + 1 )
  }
  return (
    <div className="App">
      <ul className="list">
        <li>
            { title }
            <button onClick={ funcLike }>♥ { liked }</button>
        </li>
      </ul>
    </div>
  );
}

주의1: 아래와 같이 데이터를 직접 변경하는 것은 불가!

let funcLike = () => {
    liked + 1
}

주의2: onClick={ funcLike() }과 같이 괄호'( )' 삽입시 클릭 이전에도 실행되므로, 괄호'( )'는 반드시 삭제!

<button onClick={ funcLike() }>♥ { liked }</button> // 잘못된 방법! 주의!

Using the State Hook – React

---

sample1: string 데이터 변경

function App() {
  let [text, setText] = useState('수정하시겠습니까?');
  let changeText = () => {
    setText( '수정되었습니다' );
  }
  return (
    <div className="App">
      { text }
      <button onClick={ changeText }>수정하기</button>
    </div>
  );
}

function App() {
  let [text, setText] = useState('수정하시겠습니까?');
  return (
    <div className="App">
      { text }
      <button onClick={ ()=>{ setText( '수정되었습니다' ) } }>수정하기</button>
    </div>
  );
}

sample2: array 데이터 변경, array, object state 데이터는 변경함수에서 deep copy하여 변경해야한다

import React, { useState } from 'react';
import './App.css';

function App() {

  let [title, setTitle] = useState(['state 바인딩이란?']);

  function changeTitle() {
    let reTitle = [...title]; // deep copy !!
    reTitle[0] = 'state 이해하기';
    setTitle( reTitle );
  }

  return (
    <div className="App">
      <ul className="list">
        <li>
            { title[0] }
            <button onClick={ changeTitle }>수정하기</button>
        </li>
      </ul>
    </div>
  );
}

export default App;