개발자
input 컴포넌트의 onChange를 외부에서 주입받는 방식에 대해...
안녕하세요 React에서 input 공통 컴포넌트를 만드는데 질문 있습니다. input 컴포넌트의 onChange 이벤트를 prop으로 외부에서 주입받는게 맞을까요? 아니면 input 컴포넌트 내부에서 자체적으로 onChange 이벤트를 처리하는게 맞을까요? 퍼널 형식으로 되어 있는 각 페이지마다 input으로 데이터를 받아서 전역 데이터에 넣으려고 합니다 예를 들면, 가입 절차나 설문 조사같은 페이지요!
답변 1
저라면 input의 공통 컴포넌트라면 onchange로 넘겨줄 거 같네요! 타입스크립트 기준으로 props 타입을 React.ComponentProps<'input'>으로 지정하면 onchange 뿐만 아니라 input의 속성을 모두 넘겨줄 수 있게 되고 추후 리팩토링을 위해서도 편하기 때문입니다. 어느 방법이 맞는 것인지는 판단할 수 없을 거 같고 코드 짜는 사람마다 다를 거 같아요. 추후 리팩토링 업데이트 등을 고려했을 때 편리한 방법으로 가시는 것이 좋다고 생각합니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 07일
입력 컴포넌트에 대한 `onChange` 이벤트 처리 방식은 상황과 프로젝트의 요구 사항에 따라 달라집니다. 일반적으로, 만약 input 값의 변경이 컴포넌트 외부에서 반복적으로 사용되어야 하거나, 상위 컴포넌트 레벨에서 관리되어야 하는 경우 `onChange` 핸들러를 prop으로서 주입받는 것이 적합합니다. 이렇게하면 변경된 데이터를 상위 컴포넌트나 전역 데이터 스토어로 즉시 전달할 수 있습니다. 가입 절차나 설문 조사와 같은 퍼널 형식의 페이지에서는 여러 단계에 걸친 사용자 입력을 추적해야 하므로, 각 입력의 값을 개별적으로 처리하기 보다는 중앙 집중식의 state 관리 시스템 (예: Redux, Context API, MobX 등)을 고려해보실 수도 있습니다. 다만 복잡성을 줄이기 위해서, 그리고 각 input 컴포넌트가 독립적인 동작을 목표로 한다면 onChange event를 컴포넌트 내부에서 처리하는 것도 나쁘지 않습니다. 무엇이 최선의 방법인지 판단하기 위해서는, 프로젝트의 전반적인 구조와 데이터 흐름, 그리고 개발팀의 선호하는 패턴 등을 고려해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!