React useEffect 사용하는 방법

2023-04-06

안녕하세요.

지난 시간에 React에서 localStorage를 사용하는 방법을 알아보았습니다.

이번 시간에는 React에서 useEffect를 사용하는 방법을 알아보겠습니다.

<!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(() => window.localStorage.getItem("keyword") || "")
      const [result, setResult] = React.useState("")
      const [typing, setTyping] = React.useState(false)

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

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

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

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

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

  </script>

</body>
</html>

여기서 useState와 useEffect의 차이점에 대해서 말해보자면, useState의 경우 모든 이벤트에 대해서 반응하지만, useEffect의 경우, dependency array로 지정된 값이 변경될 때만 반응합니다.

만약, dependency array가 빈 배열이라면, 컴포넌트가 처음 렌더링 될 때만 반응합니다.

그리고 dependency array를 생략하면, 컴포넌트가 처음 렌더링 될 때와, 모든 이벤트에 대해서 반응합니다.

이렇게 useState와 useEffect의 차이점과 useEffect를 사용하는 방법에 대해서 알아보았습니다.

감사합니다.

< 목록으로 돌아가기