React State Hook 기본적인 사용방법

2023-04-03

안녕하세요.

지난 시간에는 이벤트를 활용해서 간단한 검색창을 만들어 봤습니다.

이번 시간에는 React의 State Hook을 사용해서 상태값을 관리하는 방법을 알아보겠습니다.

React의 State Hook은 함수형 컴포넌트에서 상태값을 관리할 수 있도록 해주는 기능입니다.

지난 시간에 작성한 코드를 일부 지우고 다시 채워놓겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

    const App = () => {
      function handleChange(event) {

      }

      function handleClick() {

      }

      return (
        <>
          <input onChange={handleChange} />
          <button onClick={handleClick}>search</button>
          <p>Looking for ...</p>
        </>
      )
    }

    ReactDOM.render(<App />, rootElement);

  </script>

</body>
</html>

위의 코드에 useState를 사용해서 상태값을 관리해보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

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

      function handleChange(event) {
        setKeyword(event.target.value)
        setTyping(true)
      }

      function handleClick() {
        setTyping(false)
        setResult(`We find results of ${keyword}`)
      }

      return (
        <>
          <input onChange={handleChange} />
          <button onClick={handleClick}>search</button>
          <p>{typing ? `Looking for ${keyword}...` : result}</p>
        </>
      )
    }

    ReactDOM.render(<App />, rootElement);

  </script>

</body>
</html>

위의 코드를 보면 useState를 사용해서 상태값을 관리하고 있습니다.

useState는 배열을 반환하는데 첫번째 요소는 상태값이고 두번째 요소는 상태값을 변경하는 함수입니다.

useState의 인자로는 상태값의 초기값을 넣어주면 됩니다.

useState를 사용해서 상태값을 관리하면 상태값이 변경되면 컴포넌트가 다시 렌더링됩니다.

그래서 상태값이 변경되면 화면에 보여지는 값도 변경됩니다.

위의 코드에서는 keyword, result, typing이라는 상태값을 관리하고 있습니다.

keyword는 검색어를 입력할 때마다 변경되고 result는 검색버튼을 누를 때 변경됩니다.

typing은 검색어를 입력할 때 true로 변경되고 검색버튼을 누를 때 false로 변경됩니다.

그리고 화면에 보여지는 값은 keyword, result, typing에 따라서 다르게 보여지도록 했습니다.

위의 코드를 실행하면 아래와 같이 동작합니다.

검색어를 입력하면 Looking for ...가 보여지고 검색버튼을 누르면 검색어가 보여집니다.

이번 시간에는 React의 State Hook을 사용해서 상태값을 관리하는 방법을 알아보았습니다.

감사합니다.

< 목록으로 돌아가기