[React] State, 렌더링의 조건

// 기억해야할 것 : 리액트의 화면 랜더링은 state의 변화에 따라 결정된다.
// 랜더링 조건 : state의 변화

function App() {

  let count = 0;

  const [input, setInput] = useState('');

  const inputHandler = function(event){
    setInput(event.target.value);
  }

  const buttonHandler = function(){
    count++;
    console.log(`count는 ${count} 입니다.`)
  }

  return (
    <div>
      <input type='text' value={input} onChange={inputHandler}>
      </input>

      {input}

      <button onClick={buttonHandler}>
        증가!
      </button>
      {count}
    </div>
  )
}

위 코드를 보면 count가 증가될 때마다 화면에서 렌더링 되어
증가되는 모습이 보여야 하지만 보이지 않는다.
원인은 렌더링의 조건은 state가 변환이 되어야 렌더링이 되는데
state가 변하지 않고 불변성이 지켜지지 않기 때문이다.