[Feat] Input 컴포넌트 추가 #87
Conversation
iconComponentMap export
input.tsx 구현
JUNOSHON
requested review from
woobottle,
wade3420 and
sumi-0011
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
||
| export default function Input({ iconName, iconColor, ...inputProps }: InputProps) { | ||
| const { required, name, value, maxLength } = inputProps; | ||
| const [inputValue, setInputValue] = useState(value ? String(value) : ''); |
There was a problem hiding this comment.
input의 value값을 해당 컴포넌트에서 상태로 제어해야하는 이유가 있을까요?
따로 없다면 아예 value 값은 props로 받고, 상위에서 제어할 수 있으면 좋을 것 같아요!
해당 value를 Input 컴포넌트에선 initial State로 처음에만 설정해줘서
상위 컴포넌트에서 value값을 바꾸어도 Input 컴포넌트에서 보이는 value값은 바뀌지 않는 상황이 생길 수 있을 것 같습니다
There was a problem hiding this comment.
우측 하단의 글자수세기 기능을 위해 사용했습니다..!
input의 value는 상위 컴포넌트에서 사용하는걸로 수정해보겠습니다.
| import { type IconComponentMap, type IconComponentProps } from '../Icon'; | ||
|
|
||
| interface InputProps extends InputHTMLAttributes<HTMLInputElement> { | ||
| iconName?: keyof typeof IconComponentMap; // iconName prop 수정 |
There was a problem hiding this comment.
iconName 이라는 네이밍을 좀 더 명확하게 허기위해 righIconName 은 어떨까요?
재안) 아이콘을 클릭했을 때 동작또한 onIconClick 과 같은 props로 넘겨주어야할 것 같아서 input 컴포넌트 안에서 name에따라 icon 컴포넌트를 렌더링하는 것보다는 iconComponet 와 같은 프롭으로 React.element를 받아와서 렌더링해주는 건 어떤가요?
전자는 icon 컴포넌트로 제한을 줄 수 있다는 장점이 있을거 같고 후자는 확장성이 열려있다는 장점이 있을 것 같아요 (다른분들 의견도 궁금)
src/components/Input/Input.tsx
Outdated
| </section> | ||
| ); | ||
|
|
||
| // <section className={sectionCss}> |
There was a problem hiding this comment.
사용하지 않는 주석은 제거하는게 좋을 것 같아요!
미사용 주석 삭제
🤔 해결하려는 문제가 무엇인가요?
🎉 변경 사항
🙏 여기는 꼭 봐주세요!
사용 방법
🌄 스크린샷
📚 참고