props로 속성을 다 가져오는 이유가 뭘까요?

Question

안녕하세요 선생님, 투두리스트 Input 구현하는 과정에서 props가 점점 많아지니 머리가 버거워지네요 ㅠㅠ 'Input 컴포넌트 만들기 - 상세설정' 강의에서 App.js파일에 <Input> 안에 속성을 작성하고 Input.js 파일에서 placeholder ={ placeholder } value ={ value } onChangeText ={ onChangeText } onSubmitEditing ={ onSubmitEditing } 이렇게 계속 그대로 가져오고 있는데요, 이렇게 계속 일을 두번하듯이 하는 이유가 무엇인가요?? 그냥 전부 Input.js에 바로 써주면 안되나용? App.js파일에서 하나도 안건드리고 Input.js 에서만 속성들 입력해주고 useState도 만들어서 적용시켜봤는데 잘 작동하는 것 같아서요... 지금 강의에서 계속 props로 다 전달하시는데 그 이유좀 알려주세요! + 하나 더 질문 있습니다! Input . propTypes = { placeholder : PropTypes . string , value : PropTypes . string . isRequired , onChangeText : PropTypes . func . isRequired , onSubmitEditing : PropTypes . func . isRequired , }; 맨마지막에 propTypes 이거는 가져오는 props들을 한번더 확인해주는 것 같은데, 쓰고 안쓰고에 따라 어떤 차이가 있는것인가요?

김범준 · Answer

안녕하세요 wodnjs306님, 관련된 내용은 섹션3의 "내장 컴포넌트" 강의에서 설명하고 있으니 강의를 참고하시기 바랍니다. 말하신대로 props를 모두 안넘겨도 되고, 심지어 Input.js를 따로 안만들고 App.js 에서 모두 작성해도 됩니다. 하지만, 그렇게 하면 동일한 코드에서 특정 props만 다른 Input을 만들고 싶은경우, 동일한 코드를 다시 한 번 작성해야 합니다. 예를 들어, 지금 작성해준 Input.js 파일의 코드에서 onSubmitEditing에 addTask함수를 지정했는데, Task를 추가하는 것이 아니라, 수정하는 기능을 하는 Input을 만들고 싶은 경우 어떻게 해야 할까요? 컴포넌트를 재사용하기 위해서는 변경이 가능한 값들을 입력받도록 만들어야 합니다. 그렇다면, onSubmitEditing에 설정할 함수는 부모 컴포넌트에서 전달받아야 겠죠? 그러면 onSubmitEditing에 설정되는 함수인 addTask에서 사용할 newText 상태 변수와 setNewText 세터 함수가 Input 컴포넌트 안에 있다면, 부모 컴포넌트에서는 상태 변수와 세터 함수를 이용할수 없겠죠 그래서 newText와 setNewText도 부모 컴포넌트에서 정의하는 것입니다. 결국 "컴포넌트를 재사용하기 위해서" 이렇게 코드를 작성합니다. 프로그래밍에 정답은 없습니다. "A라는 기능"이 필요하다면, 어떤 방법으로든 그 기능이 동작하게 하면 됩니다. 하지만 코드를 작성할 때, 되도록 유지 보수나 효율을 생각하면서 코드를 작성하는 것이 좋습니다. 지금처럼 공부를 하는 상황에서는 최대한 다양한 방법으로 코드를 작성해 보는 것을 추천합니다. 여러가지 방법으로 코드를 작성해보고 고민해보면서 공부하면 됩니다 propsTypes는 섹션3의 "props"강의에서 설명하고 있으니 강의를 참고하기 바랍니다. PropsTypes를 사용해서 props로 전달되어온 값들의 타입을 검사합니다.