데이터 바인딩(Data Binding)

• HTML 요소와 React 인스턴스의 데이터를 동적으로 연결하는 기능
• 데이터의 변화에 따라 화면이 자동으로 업데이트되어 유저와 더 나은 상호작용을 제공함
• React에서는 State의 변동 사항이 생기면, 해당 State를 사용하는 HTML을 자동으로 리렌더링함
• 자주 변경될 것 같은 데이터는 State에 저장하고 데이터바인딩을 이용

기본적인 데이터 바인딩

• const [state, setState] = useSatae(저장할 데이터) 를 이용, 데이터 바인딩 할 State 생성
  • state : 데이터를 저장하는 변수 명은 자유롭게 작성
  • setState : 변수 state의 데이터를 변경하기 위한 함수 setState 명은 관습적으로 set + 스테이트명 으로 작성

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

function App() {
	// 'useState'를 이용하여 데이터 바인딩 할 State 생성
	// 'count(state)'는 데이터를 저장 할 변수
	// 'setCount(setState)'는 변수 'count'의 데이터를 변경하기 위한 함수
  const [count, setCount] = useState(0);

  return (
    <>
	    {/* 'count'에 저장된 데이터를 출력 */}
      <p>{count}</p>
      
      {/* 클릭 이벤트를 이용해 호출할 'setCount()'호출 */}
      <button type="button" onClick={() => {setCount((prev) => prev + 1)}}>+</button>
    </>
  )
}

export default App;

• prevState를 이용
  • 이전 상태를 기반으로 업데이트
  • React의 동기적 상태 업데이트 문제 방지

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

function App() {
  const [count, setCount] = useState(0);

	// React의 동기적 상태 업데이트 문제 방지를 위해 prevState활용
  const incrementCount = () => {
    setCount((prev) => prev + 1);
  }

  return (
    <>
      <p>{count}</p>
      
      {/* 클릭 이벤트의 속성값도 중괄호를 이용해서 호출하고 싶은 함수 호출 */}
      <button type="button" onClick={incrementCount}>+</button>
    </>
  )
}

export default App;

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

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount((prev) => prev + 1);
  } // +버튼
  
  const decrementCount = () => {
    setCount((prev) => {
      if(prev > 0) {
        return prev - 1;
      } else{
        return 0;
      }
    }); // -버튼 0일 땐 작동하지 않는다.
  }

  return (
    <>
      <p>{count}</p>
      <button type="button" onClick={incrementCount}>+</button>
      <button type="button" onClick={decrementCount}>-</button>
    </>
  )
}

export default App;

input을 데이터 바인딩

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

function App() {
  const [userInfo, setUserInfo] = useState({
    name: '홍길동',
    age: 20,
    gender: 'M'
  });

  const addAge = () => {
    const copy = {...userInfo};
    copy.age += 1;
    setUserInfo(copy);
  }

  return (
    <>
      <span>{`${userInfo.name} : ${userInfo.age} : ${userInfo.gender}`}</span>
      <button type="button" onClick={addAge}>나이 증가</button>
    </>
  )

}

export default App;