20220127 Frontend 일일 개발일지
===

###### tags: `20220127`

# 개발 내용

## 회원가입 페이지 구성

:::success
회원가입 페이지를 구성했다!
:::


- 기존에 작성했던 로그인 화면과 굉장히 유사하게 생겨서 비슷하게 만들었다.
- 미리 만들어놓은 `input` atom을 활용하여 재사용했다.

#### 고민거리

맨 밑 **스니커즈 사이즈**`Input` 태그를 클릭하면 모달이 떠야했다!

- `onClick` 이벤트를 optional 하게 바인딩하여 클릭시 모달이 보이게 설계했다.


#### 문제점 봉착..!!

기존에 그리드 컴포넌트는, 다음과 같이 생긴 버튼들만 그리드로 보여줬다.


가격 정보가 있거나,

아래에 찜 아이콘이 있거나.

둘중의 하나만 렌더링을 했지만 **사이즈만** 렌더링 되게 했어야 했다!

**==Grid 컴포넌트에 props 타입을 추가했다.==**


- `sizeOnly` 카테고리라면 사이즈만 렌더링하여 원하는 그리드 모양을 구현했다.

#### 큰 고민거리

이제 해당 그리드 컴포넌트에서 클릭했을때의 이벤트를 바인딩하는데 정말 큰 고민이 있었다.

- `onClick` 이벤트가

:::info
Modal -> ProductSizeSelectGrid -> ProductSizeSelect
:::

의 경로로 `props drilling` 이 일어나는 현상이 불가피해졌다.

:::danger
종현님이랑도 많이 고민을 해보고 양하님과도 말씀을 나눴는데, `Atomic Design Pattern` 을 사용하는 이상 이는 어쩔수 없을 것 같다는 결론을 내렸다.
:::

왜?
- 그렇다고 이 props를 전역상태로 관리한다면 정말 무수히 많은 것들이 전역상태를 참조해야한다고 생각했다.
- 방금 또 의견을 공유해봤는데, `Atomic Design Pattern` 을 사용한다면 전역 상태 관리에 2단계 이상 넘어가는 props를 모두 관리하는게 낫겠다.. 생각이 들었다.
- `useCallback`으로 렌더링을 최적화한다면 `props drilling`으로 인한 리렌더링을 조금은 막을 수 있겠다 생각들었다.