랜덤하게 생성된 로또 번호의 배열을 컨텍스트에서 useState로 관리하려고 했는데, (LottoForm 컴포넌트에서 usestate로 업데이트) 컨텍스트에서는 LottoForm에서 보낸 배열은 받아지는데 state 업데이트가 되지 않는 문제를 겪음.
useReducer로 변경하고 배열을 action으로 받아서 state를 업데이트를 했더니 변경이 됨.
→ 비동기문제로 예상하지만 정확한 원인파악은 못함. 왜 해결이 됐는지도 아직 정확히 파악하지 못했다.
→ 다시 생각해보니 원본배열을 건드려서 제대로 업데이트가 안된 것 같다.
WinningNumberItem컴포넌트에서 toggle상태를 true,false로 변환해서 클래스를 부여해주고 있는데 선택된 숫자(selectedNumbers) 배열의 length가 6이 되면 setToggle하지 않도록 설정하기 위해 selectedNumbers.length을 기준으로 하여 구성하려고 했다.
length가 생각한대로 들어오지 않았다.
→ 클릭이 발생했을 때 컨텍스트의 selectedLotto함수에 e.target.textContent를 보내줘서 selectedNumbers를 구성하는데, 구성을 하자마자 그 배열을 바로 다시 받아서 사용하는 로직으로 구성하고 있어서 동기적 처리가 되지 않아 클릭하기 한단계 전의 length로 기준을 잡고 있는 것 같다고 추측.
→ 결론 : 비동기 문제와 별개로 조건을 다시 잡아서 해결. length가 한단계 전으로 기준잡고 있어도 관계없는 로직으로 구성했지만 딱 맞는 해결책은 아닌 것 같다.
Modal에서 결과를 보여줄 때 관리하는 데이터를 배열로 만들었다. 초기에는 컴포넌트 내부에서 바로 result라는 0으로 구성된 임의의 배열을 변수로 설정해서 변경을 했는데 뭔가 이상한것 같아 useState로 초기 배열을 설정하여 setResult로 배열을 수정하는 방식으로 관리하려고 했지만 실패하여 그냥 그대로 두었다. 추후에 올바른 방법으로 변경하기. → result배열을 useState로 수정해야하는 정확한 당위성이 없어서 보류.
Modal에서 '다시 시작하기'버튼을 눌렀을 때 다시 초기상태로 돌아가야하는 로직을 어떻게 구성할 것인지 고민중.
상태들이 전부 흩어져 있어서 한 곳에서 어떻게 모야서 리셋을 시킬 것인지 고민중..
→ 컨텍스트에서 useState로 관리하고 컴포넌트에서 상태를 받아서 조건부 렌더링, 리렌더링될 때 자동으로 기본값으로 렌더링되는 것을 통해 리셋을 구현했다.
(input value는 setInputValue를 통해 빈문자로 바꾸려고 했는데 무한루프에 빠지는 문제가 있어 일단 ref로 빈문자열로 조작해놓았음.)
불변성에 대한 생각을 하지 못해서 컨텍스트에서 원본상태를 계속 수정하는 방식으로 코드를 짯다.. 불변성을 지킬 수 있는 방법에 대해서 고민해 보고 꼭 리팩토링할 것.