#3 STATE

[3.0] Understanding State
1) 변경된 부분만 업데이트되는 것이 좋은 이유
리액트가 아닌 경우, 일반 자바스크립트를 쓴 브라우저는 노드정보가 바뀔때마다 노드트리를 처음부터 5단계에 걸쳐서 다시 생성함
그러나 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 투척

    const root = document.getElementById('root')
    let counter = 0
    function countUp() {
      counter = counter + 1
      render()
    }
    function render() {
      ReactDOM.render(<Container />, root)
    }
    const Container = () => (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    )
    render()

2) 클릭 카운터 보여주는 것 만들기

• let counter = 0 설정
• counter를 h3에 {counter}로 입력
• countUp 함수 제작
• button에 onClick={countUp} 이벤트 리스너 입력
  *** render()함수 만들어서
• countUp()에 붙이기 => 왜냐면 컨텐츠에 보여주는 함수가 없었기 때문에
• 아래도 render()로 변경

[3.1] setState part One

• 리액트JS에서 데이터를 저장시켜 자동으로 리렌더링을 일으킬 수 있는 방법
  1) const data = React.useState();
  를 console.log 시키면 [undefined, f ] -> undefined와 함수가 적힌 배열이 나타남
  undefined는 data이고 f는 data를 바꿀 때 사용하는 함수

React.useState() 함수는 초기값을 설정할 수 있음
즉, undefined는 초기값이고 두 번째 요소인 f는 그 값을 바꾸는 함수

배열을 꺼내기
const x = [1, 2, 3]
const [a, b, c] = x;
으로 꺼낼 수 있음

    function App() {
      const [counter, modifier] = React.useState(20)
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button>Click me</button>
        </div>
      )
    }

[3.2] setState part Two

• 리렌더링 정리
  1) 버튼에 onClick={onClick} 설정하기
  2) onClick 함수 만들기
  const onClick = () =>{
  setCounter(counter + 1)
  }
  3) modifier와 onClick 함수 연결해주기

function App() {
      const [counter, setCounter] = React.useState(0)
      const onClick = () => {
        setCounter(counter + 1)
      }
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      )
    }
    ReactDOM.render(<App />, root)

[3.4] state Functions

• 초기값의 문제가 생겨 버그가 일어나는 것을 방지하기위해
  setCounter(counter + 1)이 아닌 setCounter((current) => current + 1)을 쓴다

  const [counter, setCounter] = React.useState(0)
      const onClick = () => {
        // setCounter(counter + 1)
        setCounter((current) => current + 1)
      }

[3.5] inputs and State
1) className, htmlFor

• class는 js가 선점한 단어이기 때문에 className을 사용해야 함
• for도 마찬가지로 js 선점. htmlFor을 사용해야함.

<script type="text/babel">
function App() {
    const [minutes, setMinutes] = React.useState()
    const onChange = (event) => {
    setMinutes(event.target.value)
    }
    return (
    <div>
        <h1 className="title">Super Converter</h1>
        <label htmlFor="minutes">Minutes</label>
        <input
        value={minutes}
        id="minutes"
        placeholder="Minutes"
        type="number"
        onChange={onChange}
        />
        <h4>You want to convert {minutes}</h4>
        <label htmlFor="hours">Hours</label>
        <input id="hours" placeholder="Hours" type="number" />
    </div>
    )
}
const root = document.getElementById('root')
ReactDOM.render(<App />, root)
</script>

• const [minutes, setMinutes] = React.useState()
  로 초기값과 리렌더 함수 설정
• input에 onChange 이벤트 및 함수 설정
• value에 기본값 minutes설정
• const onChange = (event) => {
  setMinutes(event.target.value)
  }로 input에 설정한 이벤트의 현재 값을 설정해준다.

[3.6] State practice part One

    function App() {
      const [minutes, setMinutes] = React.useState()
      const onChange = (event) => {
        setMinutes(event.target.value)
      }
      const reset = () => setMinutes(0)
      return (
        <div>
          <h1>Super Converter</h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={minutes}
              id="minutes"
              placeholder="minutes"
              type="number"
              onChange={onChange}
            />
          </div>
          <div>
            {' '}
            <label htmlFor="hours">Hours</label>
            <input
              value={Math.round(minutes / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
            />
          </div>
          <button onClick={reset}>Reset</button>
        </div>
      )
    }
    const root = document.getElementById('root')
    ReactDOM.render(<App />, root)

• div로 묶어주기
• hours를 minutes를 이용하여 바꿔주려면 /60 해주면 됨
  value={minutes / 60}
• 반올림 해주기
  value={Math.round(minutes / 60)}
• 리셋 버튼 만들어주기
  Reset
• 리셋 버튼 리셋 함수 만들어주기 : setMinutes(0)로 rerender하면서 0으로 설정
  const reset = () => setMinutes(0)

[3.7] State practice part Two

function App() {
      const [amount, setAmount] = React.useState(0)
      const [flipped, setFlipped] = React.useState(false)
      const onChange = (event) => {
        setAmount(event.target.value)
      }
      const reset = () => setAmount(0)
      const onFlip = () => {
        reset()
        setFlipped((current) => !current)
      }
      return (
        <div>
          <h1>Super Converter</h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount}
              id="minutes"
              placeholder="minutes"
              type="number"
              onChange={onChange}
              disabled={flipped}
            />
          </div>
          <div>
            {' '}
            <label htmlFor="hours">Hours</label>
            <input
              value={flipped ? amount : Math.round(amount / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              disabled={!flipped}
              onChange={onChange}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flip</button>
        </div>
      )
    }
    const root = document.getElementById('root')
    ReactDOM.render(<App />, root)

1) flip 버튼 만들어주기

• flip 버튼 추가
  Flip
• onClick에서의 onFlip관련 useState 선언 : false 라고 기본값 주기.
  const [flipped, setFlipped] = React.useState(false)
  2) onFlip함수를 선언: setFlipped로 클릭 시 !로 true false 선언 변경
  현재 상황 : current 잊지 말기
  const onFlip = () => {
  reset()
  setFlipped((current) => !current)
  }
  3) input의 value요소,disbled에 flipped 관련 내용 넣어주기
  <input
  value={flipped ? amount * 60 : amount}
  id="minutes"
  disabled={flipped}
  />

<input
value={flipped ? amount : Math.round(amount / 60}
id="hours"
disabled={!flipped}
/>

• flipped 기본 / false
  disabled인 것은 hours
  minutes가 amount
  hours가 Math.round(amount/60)

-!flipped / true
disabled인 것은 minutes
minutes amount * 60
hours amount

=> 결론적으로 true일때 값을 쓰고 그 값이랑 관련된 다른 변화 값 연결!

4) 마지막 변경 해줄 때 리셋
const onFlip = () => {
reset()
setFlipped((current) => !current)
}