<div id="readability-page-1" class="page"><div id="entry-view">
            
            <main>
                <div>
                        <article id="mainContent">
                            <div>
                                <p><a href="/m/category/%EC%9D%B4%EB%A1%A0/Frontend"><span>이론/Frontend</span></a></p><h3>useEffect 내부에서는 기명함수를 사용하자</h3>
                            </div>
                            <p><cite>유세지</cite>
                                <span> 2024. 3. 17. 18:56</span>
                            </p>
                            

<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="8674651030" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-we6apVVPwuoDAazb"></ins>



            



            <div>
<figure data-ke-mobilestyle="widthOrigin" data-filename="Thumbnail (5).png" data-origin-width="1920" data-origin-height="1080"><span data-url="https://blog.kakaocdn.net/dn/8MffT/btsFQsh45qH/k6piyceWd8yPAdowOyYDsk/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/8MffT/btsFQsh45qH/k6piyceWd8yPAdowOyYDsk/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';" width="752" height="423" data-filename="Thumbnail (5).png" data-origin-width="1920" data-origin-height="1080"></span></figure>





<h3 data-ke-size="size23"><b>useEffect</b></h3>

<p data-ke-size="size16"><code>useEffect</code>는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로,</p>
<p data-ke-size="size16">공식 문서에 나와있는 <code>useEffect</code>의 예시 코드는 이러한 모양입니다.</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="953" data-origin-height="630"><span data-url="https://blog.kakaocdn.net/dn/bot6iW/btsFQfi4wQU/8jcsf6V1XhbR2Pg01RNU81/img.png" data-lightbox="lightbox" data-alt="useEffect의 사용 예시"><img src="https://blog.kakaocdn.net/dn/bot6iW/btsFQfi4wQU/8jcsf6V1XhbR2Pg01RNU81/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="blob" data-origin-width="953" data-origin-height="630"></span><figcaption>useEffect의 사용 예시</figcaption>
</figure>



<p data-ke-size="size16">코드를 보면, useEffect의 첫 번째 인자로 트리거 시 실행될 동작을 익명함수로 넣어주고 있습니다.</p>
<p data-ke-size="size16">이때 훅 내부의 함수가 길어지면 특별한 주석 없이는 <b>코드의 동작을 알기 어려워 질 때</b>가 종종 발생합니다.</p>
<p data-ke-size="size16">따라서 함수를 적절한 이름을 붙인 기명함수로 바꿔주면 팀원들의 이해를 도와줄 수 있습니다.</p>

<p data-ke-size="size16">이 상태에서, 임의로 오류를 발생시켜 보겠습니다.</p>


<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="1578" data-origin-height="592"><span data-url="https://blog.kakaocdn.net/dn/q5LwD/btsFS2oZ5w5/NvSl0RQgotEcu4yCxrCWXK/img.png" data-lightbox="lightbox" data-alt="익명함수에서 오류가 발생한 상황"><img src="https://blog.kakaocdn.net/dn/q5LwD/btsFS2oZ5w5/NvSl0RQgotEcu4yCxrCWXK/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="blob" data-origin-width="1578" data-origin-height="592"></span><figcaption>익명함수에서 오류가 발생한 상황</figcaption>
</figure>



<pre id="code_1710664924645" data-ke-language="bash" data-ke-type="codeblock"><code>Uncaught Error: Error occurred!
    at (/src/App.jsx?t=1710664770335:24:11)</code></pre>


<p data-ke-size="size16">에러가 발생한 위치의 stack trace에 at 뒤로 파일의 위치만 알려주고 있습니다.</p>
<p data-ke-size="size16">마찬가지로 함수가 익명함수이기 때문에 발생하는 현상인데,</p>
<p data-ke-size="size16">이를 기명함수로 변경시켜 준 뒤 모습을 살펴보겠습니다.</p>


<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="1576" data-origin-height="593"><span data-url="https://blog.kakaocdn.net/dn/bdV1fy/btsFP7FfQyO/0UVK670rLNQjWE0CLEUF9K/img.png" data-lightbox="lightbox" data-alt="기명함수에서 오류가 발생한 상황"><img src="https://blog.kakaocdn.net/dn/bdV1fy/btsFP7FfQyO/0UVK670rLNQjWE0CLEUF9K/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="blob" data-origin-width="1576" data-origin-height="593"></span><figcaption>기명함수에서 오류가 발생한 상황</figcaption>
</figure>



<pre id="code_1710665249173" data-ke-language="bash" data-ke-type="codeblock"><code>Uncaught Error: Error occurred!
    at errorTrigger (/src/App.jsx?t=1710664810199:24:11)</code></pre>


<p data-ke-size="size16">익명함수와는 다르게, 기명함수에서는 <b>어떤 함수에서 에러가 발생했는지</b> 확실하게 표시해주는 모습입니다.</p>
<p data-ke-size="size16">디버깅을 할 때에도 에러가 발생한 부분을 정확히 파악하면 문제를 빠르게 해결할 수 있기에</p>
<p data-ke-size="size16">앞으로도 익명함수보다는 기명함수를 사용하는 습관을 들인다면 좋겠습니다.</p>



<h3 data-ke-size="size23"><b>함수의 위치</b></h3>
<p data-ke-size="size16">useEffect를 컴포넌트의 어디에 선언해 둘 것인가에 대해서도 여러가지 의견이 있습니다.</p>
<p data-ke-size="size16">보통 컴포넌트의 최상단 혹은 JSX return의 바로 위 정도로 나뉘는데,</p>
<p data-ke-size="size16">이 부분은 취향이나 팀 컨벤션의 영역이라고 생각합니다.</p>

<p data-ke-size="size18"><b>1) 컴포넌트의 최상단</b></p>
<pre id="code_1710669142999" data-ke-language="typescript" data-ke-type="codeblock"><code>function App() {
  const [state, setState] = useState(0);
  const [state2, setState2] = useState(1);

  useEffect(function errorTrigger() {
    console.log("is Mount");
    throw new Error("Error occurred!");
  }, []);

  /**
   * other function...
   */

  return (
    &lt;div className="App"&gt;
      &lt;h1&gt;useEffect test&lt;/h1&gt;
    &lt;/div&gt;
  );
}</code></pre>


<p data-ke-size="size18"><b>2) JSX return의 위</b></p>
<pre id="code_1710669160925" data-ke-language="typescript" data-ke-type="codeblock"><code>function App() {
  const [state, setState] = useState(0);
  const [state2, setState2] = useState(1);
  
  /**
   * other function...
   */

  useEffect(function errorTrigger() {
    console.log("is Mount");
    throw new Error("Error occurred!");
  }, []);

  return (
    &lt;div className="App"&gt;
      &lt;h1&gt;useEffect test&lt;/h1&gt;
    &lt;/div&gt;
  );
}</code></pre>


<p data-ke-size="size16">개인적으로는 jsx return의 바로 위를 선호합니다.</p>

<p data-ke-size="size16">useEffect의 특성상 렌더링에 영향을 미치는 부분도 많고,</p>
<p data-ke-size="size16">컴포넌트의 다른 함수들이 먼저 선언 된 뒤 side effect에 관련된 코드가 나오는 흐름이 자연스럽게 느껴지더라구요.</p>



<h3 data-ke-size="size23"><b>마치며</b></h3>
<p data-ke-size="size16">어찌보면 사소할 수도 있는 내용들이지만, 알아두면 분명 좋은 내용이라 정리해보았습니다.</p>
<p data-ke-size="size16">짧은 글 읽어주셔서 감사합니다.</p></div>
            





                            
                        </article>
                        
                            
                        
                        
                        
                        
                        
                            
                        

                        
                        

                        
                    </div>
            </main>
        </div></div>

개발의 올바르지 않은 용례

useEffect
 
useEffect는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로,
공식 문서에 나와있는 useEffect의 예시 코드는 이러한 모양입니다.
 
 
 
코드를 보면, useEffect의 첫 번째 인자로 트리거 시 실행될 동작을 익명함수로 넣어주고 있습니다.
이때 훅 내부의 함수가 길어지면 특별한 주석 없이는 코드의 동작을 알기 어려워 질 때가 종종 발생합니다.
따라서 함수를 적절한 이름을 붙인 기명함수로 바꿔주면 팀원들의 이해를 도와줄 수 있습니다.
 
이 상태에서, 임의로 오류를 발생시켜 보겠습니다.
 
 
 
 
Uncaught Error: Error occurred!
    at (/src/App.jsx?t=1710664770335:24:11)
 
 
에러가 발생한 위치의 stack trace에 at 뒤로 파일의 위치만 알려주고 있습니다.
마찬가지로 함수가 익명함수이기 때문에 발생하는 현상인데,
이를 기명함수로 변경시켜 준 뒤 모습을 살펴보겠습니다.
 
 
 
 
Uncaught Error: Error occurred!
    at errorTrigger (/src/App.jsx?t=1710664810199:24:11)
 
 
익명함수와는 다르게, 기명함수에서는 어떤 함수에서 에러가 발생했는지 확실하게 표시해주는 모습입니다.
디버깅을 할 때에도 에러가 발생한 부분을 정확히 파악하면 문제를 빠르게 해결할 수 있기에
앞으로도 익명함수보다는 기명함수를 사용하는 습관을 들인다면 좋겠습니다.
 
 
 
함수의 위치
useEffect를 컴포넌트의 어디에 선언해 둘 것인가에 대해서도 여러가지 의견이 있습니다.
보통 컴포넌트의 최상단 혹은 JSX return의 바로 위 정도로 나뉘는데,
이 부분은 취향이나 팀 컨벤션의 영역이라고 생각합니다.
 
1) 컴포넌트의 최상단
function App() {
  const [state, setState] = useState(0);
  const [state2, setState2] = useState(1);
  useEffect(function errorTrigger() {
    console.log("is Mount");
    throw new Error("Error occurred!");
  }, []);
  /**
   * other function...
   */
  return (
    <div className="App">
      <h1>useEffect test</h1>
    </div>
  );
}
 
 
2) JSX return의 위
function App() {
  const [state, setState] = useState(0);
  const [state2, setState2] = useState(1);
  
  /**
   * other function...
   */
  useEffect(function errorTrigger() {
    console.log("is Mount");
    throw new Error("Error occurred!");
  }, []);
  return (
    <div className="App">
      <h1>useEffect test</h1>
    </div>
  );
}
 
 
개인적으로는 jsx return의 바로 위를 선호합니다.
 
useEffect의 특성상 렌더링에 영향을 미치는 부분도 많고,
컴포넌트의 다른 함수들이 먼저 선언 된 뒤 side effect에 관련된 코드가 나오는 흐름이 자연스럽게 느껴지더라구요.
 
 
 
마치며
어찌보면 사소할 수도 있는 내용들이지만, 알아두면 분명 좋은 내용이라 정리해보았습니다.
짧은 글 읽어주셔서 감사합니다.

useEffect 내부에서는 기명함수를 사용하자

댓글