[React] Lazy initialization

SleepyWoods 프로젝트를 진행하며 전체 채팅 기능을 구현했었다.

 

전체채팅을 구현하면서 혹시 부득이한 상황이 발생해 새로고침이 되는 경우에 이전에 나눴던 이야기를 확인해야 하는 경우가 존재하지 않을까? 라는 생각에 휘발성으로 채팅 내역을 일시적으로 저장하기로 하였고, 현재 상황에서 Redis를 도입하기에는 일정적으로 무리가 있었기 때문에 세션 스토리지를 사용했습니다.

 

이전 채팅 내역을 초기에 가져오기 위해서 다음과 같이 코드를 작성했다.

const [chatDatas, setChatDatas] = useState<chatType[]>(() => {
  const sessionStorageChat = sessionStorage.getItem('chat');
  return sessionStorageChat ? JSON.parse(sessionStorageChat) : [];
});

 

문득 든 생각이 이렇게 되면 상태가 변경되거나, 상위 컴포넌트에 변동이 생겨 리랜더링 될 경우에 세션스토리지를 조회하는 동작이 계속 일어나는 것이 아닌가? 라는 생각을 했었기 때문에 찾아보니 위처럼 초기값을 할당할 때 함수를 넘겨줬을 때 일반 값을 넘겨주는 것과 다르게 동작을 한다고 한다.

 

명칭부터 말하자면 게으른 초기화(Lazy initialization) 라고 하는데 React 공식 문서에 따르면, 함수는 오직 state가 처음 만들어 질 때만 실행되고. 이후 다시 리렌더링되면 이 함수의 실행은 무시된다고 한다.

 

따라서 useState를 사용하면서 초기 값을 할당할 때 복잡한 연산을 포함하는 경우 사용하면 처음 랜더링 될때만 실행되고 이후부터는 실행되지 않아 성능 최적화의 효과를 볼 수 있다.

 

내 경우 세션스토리지를 조회하는 보다 무거운 작업이 처음 랜더링 될 때 한 번만 실행이 되고 이후 컴포넌트 내 상태가 변경되었을 때는 수행되지 않아 성능상으로 최적화가 가능했다.

 

추가적으로 게으른 초기화를 사용하는 경우로는 배열을 다루는 map, filter, find 등의 배열 메서드 또는 로컬스토리지나 세션스토리지 조회 같은 동작들이 포함된다고 한다.