인프런 커뮤니티 질문&답변
작성한 질문수
동작순서 및 prop 대해서 궁금한게 있습니다.
작성
·
314
0
안녕하세요 강의자님 강의를 정말 유익하게 보고 있는 수강생입니다.
추상메서드 중에 List 와 KeywordList 간의 실행 순서에 조금 궁금한게 있습니다.
실제 List 클레스에서 renderItem 을 추상메서드로 남기고 기능을 KeywordList 에서 구현해서 적용하는것 까지 이해 하였습니다.
그런데 실제로 App.js 에서 호출할떄 KeywordList 를 호출하는데 List 의 render() 함수가 동작하는건 어떤 과정인지 좀 알고 싶습니다.
KeywordList 의 마운트 시 data 를 가져와 setState 에서 변화가 생겨서 render()를 호출하고 상속을 받았으니 List 의 render() 가 호출된거라고 생각하면 될까요?
또하나는 prop 에 대한 문의입니다.
List.js 에서 onClick 에 this.props 구문을 썼는데 이부분이 잘 이해가 안되서 이 prop을 어떤 과정을 통해 사용할 수 있는건지 문의드립니다.
웹팩강의로 시작해 여기까지 왔는데 늘 좋은강의 감사드립니다.
답변 3
1
0
두 번째는 this.props.onClick 함수를 어떻게 사용할수 있는건지 질문주셨는데요.
이렇게 만들어진 객체의 속성 중 Component 클래스에서 만든 props가 있을 것이고요. render() 함수에서는 자신(this)의 속성에 접근할 수 있는 것입니다.
두 번째 설명이 좀 부족하는 느낌이 드는데 혹시 이해 되셨을까요?
0
List와 KeyworkdList는 클래스인 반면 KeywordList 클래스로 만든 객체를 관찰해 보시면 어떨까요?
이 객체는 리액트 Component 클래스의 속성(state)과 메소드(render, componentDidMount)를 가지고 있을 겁니다.
그리고 List 클래스에 정의한 속성(state.item)과 메소드(renderItem, redner)를 가지고 있기도 하죠. 여기서 render 메소드는 서브 클래스에서 정의한 것을 가지겠죠? 상속해서 오버라이드 했으니깐요.
마찬가지로 KeywordList 컴포넌트의 속성(정의한게 없지만)과 메소드(componentDidMount, renderItem)도 가집니다. componentDidMount는 Component의 것이 아니라 오버라이딩한것을 가집니다. renderItem도 마찬가지고요.
결국 app.js에서 사용하는 KeywordList로 만든 객체는 다음 모양일 겁니다.
- state = {item: []} // List 클래스로 정의한 것
- render() // List 클래스로 정의한 것
- renderItem() // KeywordList 클래스로 정의한 것
- componentDidMount // KeywordList 클래스로 정의한 것
- 나머지 속성과 메소드 // Component 클래스로 정의한 것
happycho33님이 이해한 것이 맞고요. 좀 더 자세히 설명 드렸습니다.
이해하셨다니 안심입니다.