<div id="readability-page-1" class="page"><article id="mainContent">
                                <div>
                                    <p><a href="/m/category/React"><span>React</span></a></p><h3>[React] 이벤트 리스너에서 현재 상태가져오기</h3>
                                </div>
                                <p><cite>코딩하는 Jay</cite>
                                    <span> 2023. 6. 20. 17:32</span>
                                </p>
                                                <div>
                                <figure data-ke-mobilestyle="widthOrigin" data-filename="luke-stackpoole-eWqOgJ-lfiI-unsplash.jpg" data-origin-width="5105" data-origin-height="6381">
    <span data-url="https://blog.kakaocdn.net/dn/cXbZ4D/btskIPLOI1y/0XkshzYcoIAe4fWF6XY1X0/img.jpg" data-lightbox="lightbox" data-alt="사진: Unsplash 의 Luke Stackpoole">
        <img src="https://blog.kakaocdn.net/dn/cXbZ4D/btskIPLOI1y/0XkshzYcoIAe4fWF6XY1X0/img.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="475" height="594" data-filename="luke-stackpoole-eWqOgJ-lfiI-unsplash.jpg" data-origin-width="5105" data-origin-height="6381">
    </span>
    <figcaption>사진: Unsplash 의 Luke Stackpoole</figcaption>
</figure>
<p data-ke-size="size16">&nbsp;이벤트 리스너 내부에서 상태를 접근하면 최신의 상태를 가져올 수 없습니다. 이벤트 리스너가 등록될 시점의 상태로만 접근이 가능합니다. 그렇다면, 최신의 상태를 가져오기위해서는 어떻게 해야할까요?</p>
<p data-ke-size="size16">&nbsp;useRef를 이용해 이 문제를 해결 할 수 있습니다.</p>

<p data-ke-size="size16">&nbsp;간단한 예제 프로그램을 만들어봤습니다.</p>
<p data-ke-size="size16">&nbsp;화면에는 현재 count 상태 값을 출력하고, 버튼을 클릭하면 count 값을 1 증가시킵니다. 증가된 상태 값은 바로 적용되어 화면에 출력됩니다. 브라우저 화면을 더블 클릭하면 count 값을 alert 창에 출력하도록 이벤트 리스터도 추가했습니다.</p>
<pre data-ke-language="javascript"><code>import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incHandler = () =&gt; {
    setCount(count + 1);
  };

  useEffect(() =&gt; {
    window.addEventListener("dblclick", () =&gt; {
      alert("count: " + count);
    });
  }, []);

  return (
    &lt;div className="App"&gt;
      &lt;header className="App-header"&gt;
        &lt;p&gt;{count}&lt;/p&gt;
        &lt;button onClick={incHandler}&gt;증가&lt;/button&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  );
}

export default App;</code></pre>
<p data-ke-size="size16">&nbsp;여기서 바로 문제가 재현됩니다. count를 증가시키고 브라우저 화면을 더블클릭하여 count 값을 출력했는데, 현재 count 값과 다른 값이 출력되는 것을 확인할 수 있습니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-06-20 오후 5.01.59.png" data-origin-width="1546" data-origin-height="1394">
    <span data-url="https://blog.kakaocdn.net/dn/XVaoD/btskKD4x8GS/vkVGSB8BRnpfrjrPym8RS1/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/XVaoD/btskKD4x8GS/vkVGSB8BRnpfrjrPym8RS1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-06-20 오후 5.01.59.png" data-origin-width="1546" data-origin-height="1394">
    </span>
    
</figure>
<p data-ke-size="size16">&nbsp;이것은 이벤트가 등록되는 시점의 count 값을 복사하여 참조하고 있기 때문에 발생되는 문제입니다. 이를 해결하기 위해서는 useRef를 활용해야합니다.</p>
<pre data-ke-language="javascript"><code>import "./App.css";
import { useEffect, useRef, useState } from "react";

function App() {
  const [count, _setCount] = useState(0);
  const countRef = useRef(count);
  const setCount = (value) =&gt; {
    countRef.current = value;
    _setCount(value);
  };

  const incHandler = () =&gt; {
    setCount(count + 1);
  };

  useEffect(() =&gt; {
    window.addEventListener("dblclick", () =&gt; {
      alert("count: " + countRef.current);
    });
  }, []);

  return (
    &lt;div className="App"&gt;
      &lt;header className="App-header"&gt;
        &lt;p&gt;{count}&lt;/p&gt;
        &lt;button onClick={incHandler}&gt;증가&lt;/button&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  );
}

export default App;</code></pre>
<p data-ke-size="size16">&nbsp;위와 같이 수정하면 됩니다. useRef 훅을 이용해 countRef 상태를 만들고, setCount할 때, countRef.current와 count 상태를 모두 변경합니다. 이벤트가 등록되는 시점에는 countRef의 참조값이 복사되기 때문에 countRef.current 값을 활용하면 최신의 상태를 유지할 수 있게 됩니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-06-20 오후 5.10.48.png" data-origin-width="1544" data-origin-height="1402">
    <span data-url="https://blog.kakaocdn.net/dn/bEcVqf/btskJi7SJd3/CQHmeDUEdf7uJjYi75SAo1/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bEcVqf/btskJi7SJd3/CQHmeDUEdf7uJjYi75SAo1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-06-20 오후 5.10.48.png" data-origin-width="1544" data-origin-height="1402">
    </span>
    
</figure>
<p data-ke-size="size16">샘플 소스: <a href="https://github.com/hjleesm/test-useref" target="_blank" rel="noopener">https://github.com/hjleesm/test-useref</a></p>
<figure id="og_1687249864959" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="object" data-og-title="GitHub - hjleesm/test-useref" data-og-description="Contribute to hjleesm/test-useref development by creating an account on GitHub." data-og-host="github.com" data-og-source-url="https://github.com/hjleesm/test-useref" data-og-url="https://github.com/hjleesm/test-useref" data-og-image="https://scrap.kakaocdn.net/dn/dpmvL0/hyS4ztIEE0/MKIt8mP9rcMIkUftVT0Ayk/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600"><a href="https://github.com/hjleesm/test-useref" target="_blank" rel="noopener" data-source-url="https://github.com/hjleesm/test-useref">

<div>
<p data-ke-size="size16">GitHub - hjleesm/test-useref</p>
<p data-ke-size="size16">Contribute to hjleesm/test-useref development by creating an account on GitHub.</p>
<p data-ke-size="size16">github.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/dpmvL0/hyS4ztIEE0/MKIt8mP9rcMIkUftVT0Ayk/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600"></figure>
<p data-ke-size="size16">참고: <a href="https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559" target="_blank" rel="noopener">https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559</a></p>
<figure id="og_1687249901688" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Accessing React State in Event Listeners with useState and useRef hooks" data-og-description="If you’re using React hooks in a component with an event listener, your event listener callback cannot access the latest state. We can…" data-og-host="medium.com" data-og-source-url="https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559" data-og-url="https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559" data-og-image="https://scrap.kakaocdn.net/dn/Wl1WF/hyS2B7LFfA/VmRxRdVR38fQnV3nD4pmcK/img.jpg?width=1200&amp;height=887&amp;face=0_0_1200_887"><a href="https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559" target="_blank" rel="noopener" data-source-url="https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559">

<div>
<p data-ke-size="size16">Accessing React State in Event Listeners with useState and useRef hooks</p>
<p data-ke-size="size16">If you’re using React hooks in a component with an event listener, your event listener callback cannot access the latest state. We can…</p>
<p data-ke-size="size16">medium.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/Wl1WF/hyS2B7LFfA/VmRxRdVR38fQnV3nD4pmcK/img.jpg?width=1200&amp;height=887&amp;face=0_0_1200_887"></figure>

            
            
                </div>
                                
                            </article></div>

Hello Jay's Programming World!

이벤트 리스너 내부에서 상태를 접근하면 최신의 상태를 가져올 수 없습니다. 이벤트 리스너가 등록될 시점의 상태로만 접근이 가능합니다. 그렇다면, 최신의 상태를 가져오기위해서는 어떻게 해야할까요?
 useRef를 이용해 이 문제를 해결 할 수 있습니다.
 
 간단한 예제 프로그램을 만들어봤습니다.
 화면에는 현재 count 상태 값을 출력하고, 버튼을 클릭하면 count 값을 1 증가시킵니다. 증가된 상태 값은 바로 적용되어 화면에 출력됩니다. 브라우저 화면을 더블 클릭하면 count 값을 alert 창에 출력하도록 이벤트 리스터도 추가했습니다.
import "./App.css";
import { useEffect, useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  const incHandler = () => {
    setCount(count + 1);
  };
  useEffect(() => {
    window.addEventListener("dblclick", () => {
      alert("count: " + count);
    });
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <p>{count}</p>
        <button onClick={incHandler}>증가</button>
      </header>
    </div>
  );
}
export default App;
 여기서 바로 문제가 재현됩니다. count를 증가시키고 브라우저 화면을 더블클릭하여 count 값을 출력했는데, 현재 count 값과 다른 값이 출력되는 것을 확인할 수 있습니다.
 이것은 이벤트가 등록되는 시점의 count 값을 복사하여 참조하고 있기 때문에 발생되는 문제입니다. 이를 해결하기 위해서는 useRef를 활용해야합니다.
import "./App.css";
import { useEffect, useRef, useState } from "react";
function App() {
  const [count, _setCount] = useState(0);
  const countRef = useRef(count);
  const setCount = (value) => {
    countRef.current = value;
    _setCount(value);
  };
  const incHandler = () => {
    setCount(count + 1);
  };
  useEffect(() => {
    window.addEventListener("dblclick", () => {
      alert("count: " + countRef.current);
    });
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <p>{count}</p>
        <button onClick={incHandler}>증가</button>
      </header>
    </div>
  );
}
export default App;
 위와 같이 수정하면 됩니다. useRef 훅을 이용해 countRef 상태를 만들고, setCount할 때, countRef.current와 count 상태를 모두 변경합니다. 이벤트가 등록되는 시점에는 countRef의 참조값이 복사되기 때문에 countRef.current 값을 활용하면 최신의 상태를 유지할 수 있게 됩니다.
샘플 소스: https://github.com/hjleesm/test-useref
참고: https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

[React] 이벤트 리스너에서 현재 상태가져오기

댓글