[Fix] deviceType undefined 에러 뜨는 이슈 해결 #411
Conversation
|
There was a problem hiding this comment.
버그발견하고 픽스해주셔서 감사합니다!!
Maximum update 이슈는 저도 구현하던 중에 이건 별도의 context로 분리해서 전역에서 관리해주는게 맞다(말씀하신 이유처럼 모든 뷰, 모든 컴포넌트에서 동일한 값이니까)고 생각해서 이후에 성능개선을 위해 꼭 수정해야겠다고 생각했던 부분인데 딱 작업해주셔서 정말 좋네요 :)
사실 이전에 deviceType을 FormContext에 넣어줬던 이유는
다른 페이지에서는 해당 워닝이 발생하지 않고 ApplyPage, ReviewPage에서만 문제가 발생하였고
Maximum update와 함께 발생했던 워닝이 아래와 같은 워닝이었는데
발생 위치가 InputLine이라고 되어있어서 해당 컴포넌트에서만 국소적으로 context를 썼던거였어요!
-> 즉 deviceType을 context에 넣어주기 전부터 Maximum update 워닝은 발생했어서, formContext에 넣어준게 원인은 아니었을 것 같아요.
그런데 저 uncontrolled 워닝만 해결되고 Maximum update는 그대로였던걸 보면, 다른 페이지가 아닌 Apply/ReviewPage에서만 사용하고 있는 컴포넌트들에서 발생한다는 것이니 Input 이 아닌 TextArea나 SelectBox 등과 같은 친구 때문이었겠다는.. 생각이 이제야 드네요??
무튼 deviceType을 FormContext에 혼용함으로써 다른 곳에서 버그가 생겼고, 또 전체 성능을 고려했을 때 전역에서 관리해주는 것이 맞다고 생각해서 충분한 해결책인 것 같습니다 👍 👍 👍 👍 🚀🚀🚀🚀
Related Issue : Closes #410
🧑🎤 Summary
🧑🎤 Screenshot
전 - css가 먹히지 않음
후 - css 먹힘
🧑🎤 Comment
🧘🏻♂️ Maximum update depth exceeded. 에러 해결
일단 현재는 deviceType을 FormContext에서 관리하고 있었는데요
FormContext는 input들 각각에 required를 각자 관리해주기 위해 있는 거였어요
이때 deviceType을 이 안에 넣어주게 됨으로써
각각의 input들에서 각자의 device type을 관리하게 되었어요
다시 말해 각각의 input들에서 각각 useDevice를 실행해주는 것이죠
이 때문에 Maximum update 이슈도 발생한 것으로 파악이 돼요!
따라서 FormContext에서 deviceType을 제거하고
App.tsx에서 전체 컴포넌트에 하나의 DeciveTypeContext를 감싸준 뒤
이를 모든 곳에서 활용하도록 했어요
각 input들 마다 다른 device type이 필요한 것이 아니라
모든 곳에서 공통된 device type이 사용되니까요!
🧘🏻♂️ Form context의 device type undefined 떠서 디자인 적용 안 되는 이슈 해결
왜 안 되는 거였는가?
기존에는 Textbox 안에서 FormContext를 Provider를 이용해서 감싸주고 있었어요
이 말은 곧 Textbox 하위 컴포넌트에서 해당 context를 이용할 수 있다는 얘기인데요
TextBox이메일, TextBox비밀번호 등등은
Textbox를 자식으로 가지는 부모 컴포넌트이기에 해당 context를 이용할 수가 없었어요
그렇기에 undefined가 뜨는 거였습니다!
그럼 왜 디자인은 반응형으로 줄어들었는가?
deviceType이 undefined라서 웹페이지 크기가 어떻든 width는 208로 고정되어 있었어요
하지만 InputLine 컴포넌트의 flex css 속성을 1로 설정해서 자동으로 늘어났다 줄어드는 거였어요
실제로 해당 속성을 제거하면 width가 고정이 됩니다!
DeviceTypeContext를 Textbox에서 App.tsx로 옮겨줌으로써 해당 이슈도 해결이 되었어요 :)