[React] useState : 컴포넌트 상태

🎈 컴포넌트란

element가 모여서 만드는 웹의 부분들

🎈 컴포넌트 상태 관리

사용자의 입력값에 따라 컴포넌트가 다르게 보여지도록 하기 위해서
useState라는 함수 (내장 Hooks)을 통해 상태를 관리함

🎈 useState 사용 형태

1단계 : useState로 상태 관련 변수와 함수를 할당

import React, { useState } from 'react'

const [상태값_저장변수, 상태값_갱신함수] = useState(상태_초기값)

이때 상태값 갱신 함수(setState)는 상태 값(state)을 파라미터로 전달받아서 최신 상태로 업데이트함

2단계 : setState로 상태 관리 로직 함수를 설정

const 기능1 = () => {
  setState(업데이트값_또는_함수)
}
const 기능2 = () => {
  setState(업데이트값_또는_함수)
}

• setState에서 최신 상태로 업데이트하는 방법
  1. 괄호 안에 값을 직접 지정 `setNumber(number + 1)
  2. 함수 형태로 업데이트 : `setNumber(prevNumber => prevNumber + 1)
• 여기서 setState가 전달받은 현재 상태값(state)은 prevNumber 파라미터로 사용됨

3단계 : 2단계의 상태 관리 로직 함수(또는 값)를 태그에 사용

const App = () => {
  // 1번 
  // 2번 
  
  return (
    <>
      <태그 이벤트={기능1}></태그>
      <태그 이벤트={기능2}></태그>
    <>
  )
} 

🎈 예시: 플러스 마이너스 카운터 만들기

import React, { useState } from 'react'

const App = () => {
  // 1번 useState
  const [number, setNumber] = useState(0)
  
  // 2번 setState 선언
  const plus = () => {
    setNumber(prevNumber + 1)
  }
  const minus = () => {
    setNumber(prevNumber - 1)
  }  
 
  // 3번 return 
  return (
    <>
      <p>{number}{/p}
      <button onClick={plus}>+</button>
      <button onClick={plus}>-</button>
    <>
  )
} 

🎈 +

앞 글 의 코드 속 state를 React.useState로 관리하기

const App = () => {
  const [keyword, setKeyword] = React.useState("");
  const [result, setResult] = React.useState("");
  const [typing, setTyping] = React.useState(false);

  const inputChange = (event) => {
    setKeyword(event.target.value)
    setTyping(true)
  }

  const buttonClick = () => {
    setResult(`The result of ${keyword}`)
    setTyping(false)
  }

  return (
    <>
      <input onChange={inputChange} />
      <button onClick={buttonClick}>검색</button>
      <p>{typing ? `Looking for ${keyword}` : result}</p>
    </>
  )
}

ReactDOM.render(<App />, 루트)

1. useState -> 느려짐

const [keyword, setKeyword] = React.useState(
  window.localStorage.setItem("keyword")
);

const inputChange = (event) => {
  window.localStorage.setItem("keyword", event.target.value)
  setKeyword(event.target.value)
  setTyping(true)
}

// <input onChange={inputChange} value={keyword}/>

2. useEffect
   dependency array

const [keyword, setKeyword] = React.useState() => {
  return window.localStorage.setItem("keyword")
}

React.useEffect(() => {
  window.localStorage.setItem("keyword", keyword)
}, [])

const inputChange = (event) => {
  setKeyword(event.target.value)
  setTyping(true)
}

// <input onChange={inputChange} value={keyword}/>