(React) Hooks - useState

import React, {useState} from "react";

function App() {
  const state = useState();
  
  console.log(state)
  
  function increase() {
    count++;
  }
  
  return  (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>
  )
}

export default App;


// console에는 undefined, function bound dispatchAction()
// 만약 const state = useState(123)으로 시작했다면
// console에는 123, function dispatchAction()으로 나옴

If I go ahead and add a value inside useState bracket and my console log gets triggered, we can see the first value of the array gets replaced with whatever it is that I put in here. what's inside the parentheses(on console log) is basically the starting state and if we wanted to get ahold of this value through this state, we can simply say state and [0]. so that gets hold of the initial value that we put into this function.

function App() {
  const state = useState(303);
  
  console.log(state[0])
  
  function increase() {
  //count++
  }
  
  return (
    <div className="container">
      <h1>{state[0]}</h1>
      <button onClick={increase}>+</button>
    </div>
  )
}


// 이러면 console에선 303만 나오게됨

and whenever I change my state, you'll see it update automatically in h1. so effectively we're telling this h1 to track the value of the state. And whenever the state updates, then it should also render this h1. This way it's way more efficient than us calling ReactDom.render and it only updates the parts that need to be changed.

it has no meaning(state[0]), sometimes we forget what state zero is and it's hard to debug other issues when they come up. in javascript ES6, there's a concept called 'destructuring' and what it allows you to do is to destructure a complex structure. so the complex things in JS are objects and arrays

const rgb = [9, 132, 227] // 각각 r, g, b의 조합
//when you want to grab green color, it will be
console.log(rgb[1]);
//but rgb[1] seems a bit hard to know what that means so in this case we can rewrite
const [red, green, blue] = [9, 132, 227];
console.log(green);

'function bound dispatchAction()' is going to be used to update the value inside the state.

https://reactjs.org/docs/hooks-reference.html#usestate