1. 컴포넌트를 작성하는 기준

1. UI를 컴포넌트 계층구조로 나눈다
2. 정적인 UI로 만든다
    상향식 : 하위 컴포넌트 -> 상위 컴포넌트

3. 완전한 state 찾기
4. state 위치 찾기
5. 역방향 데이터 흐름 추가하기

---------------------

1. 데이터 추상화
    Headless 기반의 추상화 = UI를 관심사에서 제거

2. 한가지 역할만 하는 컴포넌트들의 조합 - Composition

---------------------

1. 컴포넌트 관계를 먼저 구분하자 - 부모/자식/형제
2. 의존성 최소화
    1. 컴포넌트를 쉽게 이해할 수 있다
    2. 컴포넌트를 쉽게 수정할 수 있다
    3. 컴포넌트의 재사용성이 높아진다
    4. 테스트가 용이하다

2. 컴포넌트 설계

a. UI 계층구조 분석

b. state 정의 및 위치 판단

c. 데이터 추상화?

---

1. 여기서 데이터 추상화??
2. 글로 정리되지 않는다 = 정확한 이해와 판단이 서지 않은 상태

---

피드백
InputForm

• onChangeInput의 네이밍
  일반적인 네이밍으로 인터페이스를 구성하자
  // 외부에서 받는 건 on~
  // 내부에서 정의하는 건 handle~
• Input에 대한 삭제 버튼은 cleable이라는 props로 개선
• Input의 textAlign props보다 Input내부에서 number일때만 분기처리 하는 방법도 고랴

https://react-ko.dev/reference/react/cloneElement#passing-data-with-a-render-prop

• inputStatus가 Input컴포넌트 내부에 있어야 한다

• 컴포넌트 이름은 통일성이 있고, 보편적으로 이해하는데 어려움만 없으면 큰 상관은 없다

• Password의 노출여부에 대한 상태를 외부에서 관리하는게 맞는가? - Input안에 넣을 수는 없을까?

<Input
  value={passwordValue}
  inputStatus={inputStatus}
  onChangeInput={onChangePasswordInput}
  renderSuffix={({ onTogglePassword }) => <ShowPasswordBtn onClick={onTogglePassword} />}
/>