목표
name값은 부모로부터 상속받고 age값은 직접설정
그리고 age값을 셋 인터벌로 1개씩 증가시키고 5가 됐을때 함수 실행을 중단해보자.
과정
초기값 state에 age값과 count값을 할당,
render 함수를 통해 컴포넌트를 구성,
좀더 편하게 작성하기 위해 상속받는 name과 설정한 age를 구조분해 할당을 하였다.
매우 중요
여기서 componentDidMount란?
컴포넌트를 통해 돔 요소가 화면에 뿌려진 이후 실행되거나 등록되는 함수들을 모아둔 함수라고 보면 된다.
이 componentDidMount는 컴포넌트가 살아있는 동안에는 끝까지 유지가 된다는 특징이 있다.
그래서 컴포넌트 생명주기가 끝날때 componentWillUnmount로 didmount안의 함수나 핸들러들을 없애
주는 작업을 해주는것이 좋다. 그렇게 해야 다시 이 페이지로 돌아왔을때 초기값부터 시작되니
즉이전에 등록한 이벤트 리스너나 타이머 등의 리소스가 남아있지 않도록 할 수 있습니다.
컴포넌트를 통해 돔 요소가 화면에 뿌려진 이후 다른 페이지로 이동하는등으로 인해 컴포넌트가
사라지는 경우를 컴포넌트의 생명주기가 끝이났다. 라고 표현한다.
컴포넌트가 돔 요소는 아니고, 돔 요소를 제작해주는 틀이라고 생각하면 된다.
아무튼 이어서 과정을 설명해보자면 componentDidMount안에 들은 함수는 dom요소가 뿌려질때
등록되거나 실행되는 함수들이기때문에, 만약 class 안의 값을 참조 해야 하는경우에는
this를 붙여줘야한다. 그래야 뿌려질때 this 참조해서 뿌려지니까
따라서 this.state.age 로 인해 state의 키밸류값에 참조가능한것.
