[2024.05.19] 챌린지반 과제 완성_피카츄의 놀이터

몇 시간 동안 피카츄랑 노니깐, 내적 친밀감이 부쩍 올라갔다...

피카츄 놀이터 만들기

뽈뽈뽈 잘 돌아다닌다..,

평소에 많이 하던 홈페이지를 구성하는 것과 다르게 이벤트 핸들러를 다루는 과제라 처음 봤을 때는 '어떻게 구현할까?' 고민을 많이 했었다. 여러 폴더 구조도 고민해 보고, 어떻게 컴포넌트를 나눌까도 열심히 고민해 보는 시간을 가져 의미 넘쳤던 과제! 

폴더구조

과제를 구현하면서 질문거리도 많이 생겼는데, 주말이라 물어볼 튜터님이 안계신다 ㅠㅠ 구글링이나 gpt를 통해서도 명확하게 나오지 않아 튜터님께 질문드리고 정리해 봐야겠다.

 

아래는 github README.md에 적었던 후기

🔎 후기
- 과제 목표였던 useState와 props 기능에 충실해서 완성하려 노력했습니다.
- 만약 실제 게임이었다면 어떻게 컴포넌트를 나눌지 고민해 보았고, 그 때문에 필요없는 로직이 추가된 경우도 생겼다. 때문에 초기 프로젝트 규모에 따른 구조를 정하는 것이 상당히 중요하고, 추후 유지보수 때 수정하게 될 경우 많은 자원을 소모하게 된다는 걸 알게 되었습니다.
- 더 기능에 따라 컴포넌트를 세분화할 수도 있을 것 같다고 프로젝트 마무리쯤에 더 생각이 났으나, 현 기능에서 큰 차이가 없다 판단하여 넘어갔습니다.
- 전역 상태 라이브러리를 사용하지 않아 props drilling이 발생했고, 확실히 상위 props를 하위 컴포넌트까지 props의 연속 전달로 전달하는 것이 까다롭다는 걸 경험해 보았습니다.
- 초기 css-module 방식으로 CSS를 작성했으나, 생각보다 상태에 따라 css를 변경할 일이 많아 'css-in-js 방식도 괜찮았겠구나'라고 생각했습니다.
- React를 사용해 이벤트 핸들러를 다뤄본 경험이 많지 않았는데, 이번 프로젝트로 react 생애 주기와 함께 이벤트 핸들러의 등록/해제 시점을 고민해 볼 수 있어 유익했습니다.
  - 이벤트 핸들러 등록시기: 컴포넌트가 마운트될 때(componentDidMount()) 이벤트 핸들러를 등록
  - 이벤트 핸들러 해제시기: 컴포넌트가 언마운트될 때(componentWillUnmount()) 해제. 컴포넌트가 DOM에서 제거되기 전에 이벤트 핸들러를 해제하여 메모리 누수를 방지함
- 현재 이벤트 핸들러가 useEffect와 함께 사용되어 불필요하게 호출되고 있는데, 조언을 얻어 해결해 볼 예정입니다.