[Refactor] Gnims 코드 리팩토링 with Chat GPT

리팩토링이 필요한 부분.

이 코드는 사실 useState를 이용했다가 무한렌더링문제가 생겨 코드가 이지경이 되었다.

현재 작동은 잘 하지만 확실히 개선할 필요가 있다.

내가 생각한 문제

 

변수선언과 값의 할당이 분리되어있음

->TDZ현상이 일어날 수 있음

깨알 복습

근데 TDZ에 대해 정의만알고있지, 사실 이게 일어난 케이스를 본 적이 없어 어떻게 문제가 될지 궁금했다.

그래서 제 스승을 찾아가봤지요

GPT선생님께서 현재 내 코드의 문제를

'isHidden'이 let을 이용해 변수로 선언되는데, if문 밖에선 값이 할당되지않아 TDZ를 만든다. 즉, 값을 할당받기 전까지는 access할 수 없다. 그래서 값을 할당하기 전에 이 변수에 접근하면 에러가 발생한다. 

라고 짚어줬다.

그리고 내가 요청한대로 예시까지 들어줬다.

맘대로 바꿀 수 있는 변수는 불안정하고 위험하긴 하다.

처음에는 이게 좀 헷갈렸는데 TDZ에 있게되어 좋다는게 아니라 에러가 발생함으로써 일종의 안전장치 역할을 해줘서 호이스팅을 방지해준다는 뜻

 

 

그래서 리팩토링된 코드

 

  const isHidden = hostId !== Number(sessionStorage.getItem("userId")) ? "hidden" : undefined;