<div id="readability-page-1" class="page"><div>
                                    <p><a href="/m/category/FRONTEND/REACTJS"><span>FRONTEND/REACTJS</span></a></p><h3>useEffect가 두번씩 호출되고 있다고요?</h3>
                                </div><p><cite>나를찾는아이</cite>
                                    <span> 2023. 7. 11. 18:49</span>
                                </p><div>
                                <p data-ke-size="size16">리액트 StrictMode 알고 계셨습니까?</p>

<pre id="code_1676267326808" data-ke-language="bash" data-ke-type="codeblock"><code>&lt;StrictMode&gt;
  &lt;App /&gt;
&lt;/StrictMode&gt;</code></pre>

<p data-ke-size="size16">StrictMode는 development 환경에서 흔한 버그들을 찾을수 있도록 도와줍니다</p>

<p data-ke-size="size16">Production build 에서는 아무런 영향을 미치지 않습니다</p>

<p data-ke-size="size16">&lt;StrictMode&gt; 안의 모든 컴포넌트 트리에서 추가적인 동작들을 활성화합니다</p>

<p data-ke-size="size16">만약 전체앱이 아니라 일부분의 컴포넌트에서만 사용한다면</p>

<p data-ke-size="size16">Root에서 &lt;StrictMode&gt;를 감싸지 말고 검수를 하고자 하는 컴포넌트를 감싸면 됩니다</p>

<p data-ke-size="size16">하지만 이왕 한다면 root App에 적용하는것을 추천합니다</p>



<p data-ke-size="size16">strict mode은 여러 기능이 있지만 그중 가장 중요한것은</p>

<p data-ke-size="size16">순수하지 않은 렌더링으로 발생하는 버그를 발견할수 있도록 컴포넌트 함수를 두번씩 호출합니다</p>

<p data-ke-size="size16">누락된 클린업을 놓치지 않기 위해 부수효과를 두번씩 호출합니다</p>


<p data-ke-size="size16">이렇게 두번씩 컴포넌트 함수를 호출함으로써 결점을 찾을수 있도록 합니다</p>

<pre id="code_1676267692862" data-ke-language="bash" data-ke-type="codeblock"><code>let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return &lt;h2&gt;Tea cup for guest #{guest}&lt;/h2&gt;;
}

export default function TeaSet() {
  return (
    &lt;&gt;
      &lt;Cup /&gt;
      &lt;Cup /&gt;
      &lt;Cup /&gt;
    &lt;/&gt;
  );
}</code></pre>

<p data-ke-size="size16">이 코드는 strict mode에서 아래와 같이 렌더링됩니다</p>

<pre id="code_1676267702227" data-ke-language="bash" data-ke-type="codeblock"><code>Tea cup for guest #2
Tea cup for guest #4
Tea cup for guest #6</code></pre>

<p data-ke-size="size16">순수하지 않은 컴포넌트 함수를 발견하게 되었습니다</p>


<p data-ke-size="size16">컴포넌트 함수를 순수하게 유지해야합니다</p>

<p data-ke-size="size16">동일한 input(props, state, context)에서는 항상 동일한 jsx를 리턴해야합니다</p>


<p data-ke-size="size16">순수하다는것은 동일한 input이 왔을때 동일한 out을 리턴해야합니다</p>



<p data-ke-size="size16">리액트는 3종류의 input이 있습니다</p>

<p data-ke-size="size16">props, state, context</p>


<p data-ke-size="size16">strict mode는 컴포넌트 함수가 순수한지 체크하기 위한 좋은 방법입니다</p>


<pre id="code_1676268714155" data-ke-language="bash" data-ke-type="codeblock"><code>const serverUrl = 'https://localhost:1234';
const roomId = 'general';

export default function ChatRoom() {
  useEffect(() =&gt; {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
  }, []);
  return &lt;h1&gt;Welcome to the {roomId} room!&lt;/h1&gt;;
}


let connections = 0;

export function createConnection(serverUrl, roomId) {
  // A real implementation would actually connect to the server
  return {
    connect() {
      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
      connections++;
      console.log('Active connections: ' + connections);
    },
    disconnect() {
      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
      connections--;
      console.log('Active connections: ' + connections);
    }
  };
}</code></pre>

<p data-ke-size="size16">위의 예제도 strict mode를 통해 클린업 함수가 누락되었는지 빠르게 알수있도록 합니다</p>


<p data-ke-size="size16">그리고 마지막으로 deprecated된 api를 사용할때 경고를 내보냅니다</p>


<p data-ke-size="size16">strict mode 참 좋죠?</p>

<p data-ke-size="size16">가끔 strict mode로 인해 두번 호출이 일어나는것을 버그로 알고 strict mode를 제거하는 분들이 있는데</p>

<p data-ke-size="size16">strict mode는 여러분의 리액트앱이 더좋도록 도와줍니다</p>

<p data-ke-size="size16">지우지마세요</p>
            
            
                </div></div>

나를 찾는 아이

Kyoung min, Kim

리액트 StrictMode 알고 계셨습니까?
 
<StrictMode>
  <App />
</StrictMode>
 
StrictMode는 development 환경에서 흔한 버그들을 찾을수 있도록 도와줍니다
 
Production build 에서는 아무런 영향을 미치지 않습니다
 
<StrictMode> 안의 모든 컴포넌트 트리에서 추가적인 동작들을 활성화합니다
 
만약 전체앱이 아니라 일부분의 컴포넌트에서만 사용한다면
 
Root에서 <StrictMode>를 감싸지 말고 검수를 하고자 하는 컴포넌트를 감싸면 됩니다
 
하지만 이왕 한다면 root App에 적용하는것을 추천합니다
 
 
 
strict mode은 여러 기능이 있지만 그중 가장 중요한것은
 
순수하지 않은 렌더링으로 발생하는 버그를 발견할수 있도록 컴포넌트 함수를 두번씩 호출합니다
 
누락된 클린업을 놓치지 않기 위해 부수효과를 두번씩 호출합니다
 
 
이렇게 두번씩 컴포넌트 함수를 호출함으로써 결점을 찾을수 있도록 합니다
 
let guest = 0;
function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}
export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}
 
이 코드는 strict mode에서 아래와 같이 렌더링됩니다
 
Tea cup for guest #2
Tea cup for guest #4
Tea cup for guest #6
 
순수하지 않은 컴포넌트 함수를 발견하게 되었습니다
 
 
컴포넌트 함수를 순수하게 유지해야합니다
 
동일한 input(props, state, context)에서는 항상 동일한 jsx를 리턴해야합니다
 
 
순수하다는것은 동일한 input이 왔을때 동일한 out을 리턴해야합니다
 
 
 
리액트는 3종류의 input이 있습니다
 
props, state, context
 
 
strict mode는 컴포넌트 함수가 순수한지 체크하기 위한 좋은 방법입니다
 
 
const serverUrl = 'https://localhost:1234';
const roomId = 'general';
export default function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
  }, []);
  return <h1>Welcome to the {roomId} room!</h1>;
}
let connections = 0;
export function createConnection(serverUrl, roomId) {
  // A real implementation would actually connect to the server
  return {
    connect() {
      console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
      connections++;
      console.log('Active connections: ' + connections);
    },
    disconnect() {
      console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
      connections--;
      console.log('Active connections: ' + connections);
    }
  };
}
 
위의 예제도 strict mode를 통해 클린업 함수가 누락되었는지 빠르게 알수있도록 합니다
 
 
그리고 마지막으로 deprecated된 api를 사용할때 경고를 내보냅니다
 
 
strict mode 참 좋죠?
 
가끔 strict mode로 인해 두번 호출이 일어나는것을 버그로 알고 strict mode를 제거하는 분들이 있는데
 
strict mode는 여러분의 리액트앱이 더좋도록 도와줍니다
 
지우지마세요

useEffect가 두번씩 호출되고 있다고요?

댓글