# state

state : 데이터가 저장되는 곳

바닐라JS는 데이터가 바뀔 때마다 전체를 업데이트하지만,
React는 바뀐 부분만 인지해서 업데이트 한다.
-> 업데이트 시간을 단축할 수 있음.

📌 핵심

데이터(state)가 바뀔 때마다 React가 바뀐 값을 가진 컴포넌트를 리렌더링 하고 UI를 refresh한다.

• UI를 업데이트 하고 싶을 때(데이터가 바뀌었을 때)는 리렌더링 해주어야 함.

리렌더링 하는 방법

1. 직접 render 함수를 다시 호출하기 (귀찮은 방법)
2. 자동으로 리렌더링 유발하기 (중요⭐️)
   : useState를 사용한다.

const [데이터, 데이터수정함수] = React.useState(기본값);

• useState는 array를 제공한다.
• 규칙 : 보통 데이터명은 마음대로 지어주고, 데이터수정함수명은 앞에 쓴 데이터명 앞에 set을 붙여줌.

예시

function App(){
  const [counter, setCounter] = React.useState(0);
  const onClick = () => {
      setCounter(counter+1); // 클릭할 때마다 counter에 1을 더해서 리렌더링 해줌.
	}
  return(
    <div>
      <h3>Total clicks : {counter}</h3>
      <button onClick = {onClick}>Click me</button>
    </div>
  )
}

현재 state를 바탕으로 새로운 state를 설정하는 방법

방법 1 : 직접 값 설정하기

단점 : 어디선가 예상치 못한 업데이트가 일어났을 때 영향을 받아 혼동을 줄 수 있음.

방법 2 : 함수 전달하기

장점: 더 안전함. 확실히 현재 값임을 알 수 있어서 혼동을 방지할 수 있음.

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

JSX는 HTML과 비슷하지만 몇 가지 다른 점이 있다.

1. class -> className
   class 라고 쓰면 에러가 나기 때문에 대신 className으로 써주어야 한다.

<h1 className="hi">hello</h1>

2. for -> htmlFor

3. JSX에 변수 추가하고 싶을 때는 { } 안에 넣어주면 된다.

form 다루는 법

• 변화를 감지해야 할 때는 event.target.value를 쓴다.
• disabled 쓰면 아무것도 입력할 수 없게 된다.

예제

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(); // flip할 때마다 값이 랜덤으로 바뀌어서 리셋해줌
    setFlipped((current) => !current);
  }
  return(
    <div>
      <h1 className = "hi">super converter</h1>
	  <label htmlFor = "minutes">Minutes</label>  
      <input
    	value = {flipped ? amount * 60 : amount} // input 값을 보여줌
		id="minutes"
		placeholder = "Minutes"
		onChange = {onChange} // 입력값 업데이트
	    disabled = {flipped === true} // flip됐을 때 입력할 수 없게
		// disabled = {flipped} 위에랑 같은 의미
	  />
      <label htmlFor = "hours">Hours</label> 
	  <input
    	value = {flipped ? amount : amount / 60} // 분을 60으로 나눠서 시간으로
		id="hours"
		placeholder = "Hours"
		onChange = {onChange} // 입력값 업데이트
		disabled = {flipped === false} // flip되지 않았을 때 입력할 수 없게
		// disabled = {!flipped} 위에랑 같은 의미
	  />
      <button onClick = {reset}>Reset</button>
	  <button onClick = {onFlip}>{flipped ? "Turn back" : "Flip"}</button>
    </div>
  )
}