10.30 항해 48일차 TIL

1. CardList 에서 user 9명의 카드를 불러옴 (axios call)
2. 카드 앞면을 보여주는 CardFront 컴포넌트의 props로 userId 전달 (사용함)
3. CardFront 컴포넌트 클릭 시 Modal Open, CardModal 컴포넌트의 props로 userId 전달(사용안함) (axios call)
4. Carousel 컴포넌트의 props로 userId 전달(사용 안함)
5. CardBack 컴포넌트의 props로 userId 전달(사용 안함)
6. TapForm 컴포넌트의 props로 userId 전달(Tap 요청 시 userId 필요)

결국 CardFront ⇒ CardModal ⇒ Carousel ⇒ CardBack ⇒ TapForm 순으로 props를 받는데,

문제가 될 정도의 Prop Drilling인가?

일단 해당정보가 필요없는 컴포넌트 3개를 지나 들어가야 하니 좋아 보이지는 않는다.

props로 받는 방법 외의 생각난 방법은

• 가장 간단하다고 생각 되는 방법은 loadCurrentCard의 Response 레코드에 userId를 추가한다.
• state의 모든 카드 값 중에서 현재 누른 카드와 비교하여 ID를 가져온다.
  • 확인 해보았지만 딱히 비교할 만한 값이 보이지 않는다.
  • list를 하나 더 만들어서 관리하면 될 것 같긴 한데 너무 불필요한 작업인 것 같다.

혼자 생각을 해 보았을 땐 api 변경 ⇒ props ⇒ redux 순으로 써야할 것 같다.

redux로 사용 시 불필요한 작업이 너무 많아질 것 같다.

api변경이 정말 어려운 상황이라면 props로 넘겨주는 방법을 사용 할 예정

api 수정 요청을 하고 수정 하기 전까지 props로 사용