오늘도 오늘도 에러와 함께 시작하는 개발이다.이번엔 useState에서 받아올 배열의 인덱스값 관련 문제인 것 같다. 현재 구조가
메이커 컴포넌트에서 리코일로 배열 길이 확인 -> 렙퍼 컴포넌트한테 배열값 프롭스 전달인데 시퀸스를 추가하면서 이 부분에서 뭔가 문제가 터진 것 같다. 코드는 렙퍼 75번 줄이 에러라고 가리키지만 그보다 상위 컴포넌트인 메이커 쪽을 살펴봐야 한다.
상부 코드는 컨디션 메이커, 하부 코드는 시퀸스 메이커이다. 리코일 값 변경 부분을 살펴보니 if 값에 condition을 고대로 사용하고 있는 문제를 발견했다. 그리고 그 밑의 스위치들도 바꿔야한다.
오 쓋! 아직도 에러가 발생한다. 아까 부분이 문제가 맞긴 했지만 우리가 고쳐야하는 그 문제는 아니었던 것 같다. 스샷으로 찍지는 못했지만 컨디션을 추가해서 배열 길이를 늘리면 그 수만큼 시퀸스 배열을 추가로 생성할 수 있었다. 그 부분까지 에러가 없었다면 컨디션 배열과 관련된 값을 사용해서 문제가 생긴다는 뜻이다.
이 부분이 문제였다. 시퀸스 메이커를 부모 컴포넌트로 받아와도 useEffect에서 컨디션리스트 배열값을 받아오니 에러가 나온 것이었다. 하지만 시퀸스를 사용할 땐 컨디션을 쓰면 안되는데?
useState를 일전에 삼항 연산자로 구분해서 사용한 적이 있었다. RecoilState도 가능할까 싶어 시도해봤는데 제대로 작동한다!! 이제 네이밍 고치고, 아래 사용되는 시퀸스용 RecoilState도 합치면 불필요한 스테이트 하나를 줄일 수 있을 것이다.
지금 즉시, 간단한 리팩토링 후 yarn start
크~~~ 제대로 적용된다. 이제 행동 시퀸스에서 라디오 버튼에 관련된 리스트만 적용시키면 당장의 큰 틀 하나는 끝이다.