개발공부

재우스 AI 후속 패치 - AI 메이커 추가 6

카로루딘 2024. 7. 8. 22:55

 

 

State변수 통합으로 인해 컨디션 체크를 앞에서만 하게 되었다. 하지만 문제가 생겼다.

 

 

써야할 useState가 한도끝도없이 많아졌다. 처음 구조상으로는 해당 슬롯만 바뀌도록 하기에 useState가 겹칠일이 없었는데, 구조를 통일시키는 과정에서

 

useState를 한 번 4개를 가져다 고치게 되었다. 이건 좋지 못하다. 안그래도 가져올 배열들이 천지삐까리인데 한 번 바꿀 때 마다 useState를 4개씩 우다다다 고치면 많은 문제가 생긴다. useMemo로 조금이라도 효율화를 시킬 수 있지 않냐고 하는데, 이 배열이 정말 한도끝도없이 나타날 예정이므로 얼마나 많은 값이 메모리 상에 올라갈지 모른다.

그러면 useState값을 하나로 합치면 되지 않을까?

 

 

배열을 받는 useState를 만들었다. 이 radio에는 배열이 들어갈테고, 그 배열에는 또 배열이, 이 radio들은 그 위로 또 배열에 자기를 집어넣고.......아이구 머리야. 앞으로 만들 배열이 최소 셋인데(구조 계산이 맞다면) 이걸 얼마나 해야하지?

 

하지만 큰 문제는 해결했다. 이제 useState를 하나만 처리하므로 리렌더링을 4번 할지도 모르는 상황을 피했다. 리액트에서 한 번에 여러 useState가 변경되면 알아서 머리 굴려 한 번의 리렌더링을 진행한다고 하는데, 이를 피할 수 있는 것이 최고겠다.

 

이제 미뤄뒀던, 패턴 뒤에 삭제 버튼을 만들어야한다.

 

 

여기서 "그리고" 뒤에 삭제 버튼을 추가할까 생각했지만, 스크린샷을 뜨면서 깨달은 것이. 복사도 만들어야한다! 그럼 이제 어떻게 해야할지 조금 복잡해진다. 시퀸스 왼쪽에 버튼을 만들까? 아니면 우측에 고정시킬까? 크기에 따라 전체 div 크기를 또 변경해야할지도 모르겠다. 현재 700px이 이 시퀸스, 컨디션 박스에 할당된 크기인데, 이를 더 늘리면 그냥 페이지 하나로 분리하는 것이 나을지도 모르겠다....