[React] Lazy initialization 지연 초기화 #useState 초기값

💡 지연 초기화

기본적으로는 useState에 초기값을 넣어주게 되면 state가 뭐 어떻게 변하건 초기값을 계속 불러오게 된다. 하지만 Lazy initialzation 기법(?) 을 사용하면 처음 렌더링 될 때만 호출(동작)된다. 

 

 

원래 쓰던 방법

const getName = () => {
  /* 막 api 불러오고 */
  /* 막 데이터 가공하고 */
  /* 막 데이터 정렬하고 */
  /* 기타 무거운 코드들 */
  return 전국민이름모음
}
const [name, setName] = useState(getName());

초기값으로 getName()에서 반환된 값을 사용한다. 가벼운 작업이나, 상수값 같은 것들은 그냥 써도 되겠지만 혹시 저렇게 작업량이 많고 무거운 값을 반환받아 사용될 경우 성능적인 이슈가 생길 수 있다. (뭐 할때마다 getName()을 호출하면 충분히 그럴만하다.)

 

그렇지만 useState()의 초기값으로 콜백함수를 넣어서 반환 받도록 처리하면 최초 1회 렌더링될때만 호출하게 되니 마음이 편해질 수 있겠다.

 

Lazy 어쩌구

const [name, setName] = useState(() => getName());

 간단하게 익명함수 하나 넣어주고 반환받으라고 시키면 된다.