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

리액트 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는 여러분의 리액트앱이 더좋도록 도와줍니다

 

지우지마세요