컴포넌트 상태 다루기

DOM : 논리트리
컴포넌트 : 엘리먼트의 집합
엘리먼트 : 요소

useState hook

• useState는 현재의 값을 저장하는 기능과 업데이트하는 함수를 쌍으로 제공한다.
• 해당 함수는 이벤트 핸들러에서 호출이 가능하다.
• 컴포넌트 안에서 useState는 여러 번 선언이 가능하다.
• 또한 초기 값으로는 아까처럼 숫자뿐만 아니라 문자, 그리고 배열을 넣는 것도 가능하다.

const [state,setState] = React.useState(state)
// [상태 값 저장 변수,상태 갱신 함수] = React.useState(상태 초기값)

function Btn() {
    const [keyword, setKeyword] = React.useState('')
    const [typing, setTyping] = React.useState(false)
    const [result, setResult] = React.useState('')

    function handleChange(e) {
      setKeyword((cur) => cur = e.target.value)
      setTyping(true)
    }
    function handleClick() {
      setTyping(false)
      setResult((cur)=> cur = `we find result of ${keyword}`)
    }
    return (
      <>
        <input type="text" onChange={handleChange} ></input>
        <button onClick={handleClick}>search</button>
        <p>{typing ? `Looking for ...${keyword}` : result}</p>
      </>
    )
  }
  const App = () => {
    return (
        <Btn />
    )
  }
  ReactDOM.render(<App />, root)

상태 초기값을 가져올때 딜레이가 걸릴수도 있을경우 함수로 작성해 호출을 보장해 줄 수 있다

const [keyword, setKeyword] = React.useState(() => window.localStorage.getItem('keyword'))