1차 프로젝트 회고록 - 이우제

트러블 슈팅 기록

전역 상태

• 사용자 정보를 깊은 뎁스의 컴포넌트까지 전달하고 공용으로 사용해야 했기에 다음과 같은 값을 전역으로 관리했다.

authUser = {
	isAuth: boolean
	userName: 'string'
	userId: number
}

• 전역 상태를 사용해 사용자가 로그인 되어있음을 알려주는 authUser.isAuth 값이 true 일 때만 보여줄 수 있는 페이지를 구성했다.

• 이 과정에서 useEffect hook을 통해 쿠키의 값을 확인하고 렌더링을 시켜줬는데, ProtectedRoute가 제대로 작동하지 않았다.

• hook을 사용한 상태는 HTML로 구성된 컴포넌트들이 먼저 생성된 후 내려주므로 발생하는 문제였다.

• 평소 사용하지 않던 useLayoutEffect 를 통해 해결해 보려 했으나 이 역시 작동하지 않았다.

• React 공식 문서를 들어가 이와 관련된 내용을 찾아보니 &&연산자와 setIsLoading 과 같은 값을 사용해 렌더링을 일시적으로 제어시켜주고 나서 데이터를 받았을 때 컴포넌트를 보여줘야 했다.

• 실제로 웹앱이 동작하는 과정에서 메인 페이지 이후 다른 주소를 보여주므로 이와 같은 상태가 큰 문제가 되지 않는 경우였으나, 추후에도 충분히 이러한 상황을 만날 것이므로 좋은 탐구가 되었다.