Modern React 3

useState 를 통해 컴포넌트에서 바뀌는 값 관리

:: 함수형에서의 state관리하기

• 숫자를 카운트하는 예제....

<Counter.js>
import React from 'react';

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

//1. 여기까지만 하면 브라우저에 0과 버튼만 띄울 수 있음
=====>
function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}
// 2.  함수형태를 넣어주어야 하지, 함수를 하기처럼 실행하면 x
"onClick={onIncrease()}"
이렇게 하면 렌더링되는 시점에서 함수가 호출되버리니까 이벤트를 설정할때에는 함수타입의 값을 넣어주기!
//3. 여기까지 하면 버튼 이벤트에 의해 콘솔창에 +1과 -1이 찍힘!

export default Counter;

<App.js>
import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

• 여기서 동적으로 바뀌게 하려면..?

<counter.js>
import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }
//  setNumber(=setter)함수는 파라미터로 전달 받은 값을 최신 상태로 설정

  return (
    <div>
      <h1>{number}</h1>
      // 여기서는 default값 0이 아닌 바뀐 숫자가 들어갈 수 있게 {number}로 바뀜
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

• 함수형 업데이트..?

<counter.js>
import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }
// 상위처럼 setNumber에 그 다음 상태를 파라미터로 넣어준것이 아니라, 값을 업데이트 하는 함수를 파라미터로 넣은 것, 이게 합수형 업데이트. 주로, 컴포넌트를 최적화를 하게 될 때 사용.

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;