[TDL] 07/24 Today's-Done-List

- 제로베이스 React 강의

중복 추첨 오류

간단한 명함 추첨 이벤트를 구현하는데, 리액트를 최근에 공부를 안 해서 그런지 정말 많은 부분을 잊어서..
리액트의 특징? 철학에 대해서 조차 많은 부분 기억을 못 해서 슬픈 하루였다..

혼자서 최대한 구현을 해보고, 강의를 보며 내 코드와 비교해보았다.

• 데이터를 가져와서 렌더링 시키려면, useEffect를 사용해서 업데이트될 때만 재 렌더링 되도록 해주어야 한다.
  또한 이 것이 업데이트되고 있는지 상태를 알려면 useState를 사용하여야 한다.
  늘 api 받아와서 useEffect에 구독시켜서 update 될 때마다 렌더링 하는 것이 당연했는데.. 이 당연한 것도 잊어서 그냥 import 한 data 객체를 바로 사용했다 하하.
• 마지막에 모든 당첨자를 발표하기 위해, reduce를 사용해보자.
  이 부분은 고민하며 여러 방법으로 구현해보다가 결국 실패했던 부분이다.
  강의 코드를 보니, reduce를 사용하여 누적 값에 새로운 값을 concat으로 합쳐서 return 시키는 구조였다.
  reduce는 아직도 익숙하지가 않아서인지, 필요할 때마다 늘 생각이 안 난다ㅠ reduce, filter와 더 친해져야 할 것 같음.
• 중복 추첨을 방지하기 위해, filter를 사용해보자.
  나는 기존의 데이터에 있는 값 중 name을 새로운 상태의 배열에 저장하였음.
  강의 코드는 기존의 데이터를 filter를 사용해서 추첨된 대상만을 새로운 상태의 배열 객체로 저장하였다.
  그렇게 함으로써, reduce를 사용할 때나 명함을 화면에 뿌려줄 때 등 새로운 객체를 가공해서 사용해야, 자식 컴포넌트에 내려줄 때 수월한 것 같다.

강의 코드와 비슷하게 구현한 것 같이 보이지만, 조금만 자세히 보면 전체적으로 내가 중요한 부분들을 많이 놓치고 있어서 코드가 완전 엉망이다 휴. 다시 react 공부 열심히 해서, 리액트 hook 들을 모두 이해하고 현명하게 활용할 수 있도록 해보자.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

https://www.youtube.com/watch?v=8te83LNpSUE

---

- JS문법 스터디

이제까지 매주 쉼없이 js문법들을 정리해서, 한 달 정도 휴식을 갖고 9월에 다시 만나기로 했다.
일주일에 한번 정도 저녁 파트에 정리한 문법들 복습하는 시간을 가져보자.

---

주말 회고 (만족도 : 5)

주말은 항상 늘어져서 많은 것을 하진 못한다 ㅎ.ㅎ

---