컴포넌트 생명주기 (LIfe-cycle)
constructor (생성자)
constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드
- 인스턴스(instance) : 메모리에 저장되는 객체의 실체에 초점을 맞춘 용어
- 하나의 클래스를 가지고 여러가지의 인스턴스를 생성 가능
- 각각 만들어진 인스턴스들은 개별적인 요소 (예: 색깔)를 갖지만, 공통된 클래스를 가졌다는점에서 여러가지들을 공유 가능
- constructor : 함수 선언문, 함수 표현식, 클래스 (클래스도 함수)
- non-constructor : 메써드(ES6 메서드 축약 표현), 화살표 함수
- super : 함수처럼 호출할수도 있고 this와 같이 식별자 처럼 참조할 수 있는 특수한 키워드다.
- super를 호출하면 수퍼클래스(부모)의 constructor를 호출
- super를 참조하면 수퍼클래스(부모)의 메서드를 호출 가능
- 프로젝트에서 사용법
- 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, constructor 가 없어도 된다.
- 내부에서 setState()를 호출하면 안된다. 컴포넌트에 지역 state가 필요하다면 생성자 내에서 this.state에 초기 state 값을 할당하면 된다.
componentDidMount
- 컴포넌트가 마운트된 직후(처음 나타났을 때), 호출되는 곳
- 외부 데이터를 불러와야한다면, 네트워크 요청을 보내기 적절한 위치
setState()를 즉시 호출할 수 도 있지만 , 조건문으로 감싸지 않으면 무한반복이 발생할 수 있다.
componentDidUpdate
- 컴포넌트가 업데이트할 때
- 속성값이 부모컴포넌트로부터 들어왔을 때
- setState() 가 호출되어 상태값이 변경될때
- forceUpdate()로 강제업데이트 시켰을때
componentWillUnmount
- 컴포넌트가 마운트 해제되어 제거되기 직전에 호출
- 이후 컴포넌트는 다시 랜더링되지 않으므로,
componentWillUnmount()내에서setState()를 호출하면 안된다. 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않음 componentDidMount에서 구독한 매써드들을 해제 가능- RN에서
componentWillUnmount()을 사용하는 이유는 웹처럼 컴포넌트가 변경되는 것이 아닌 Stack이 쌓이기 때문에 뒤로 돌아가기를 했을때 전에 렌더링 됐던 상태로 그대로 있는다. 그래서 Stack으로 쌓일때 최초의 상태로 만들기 위해componentWillUnmount()를 사용- ex) 내 정보 수정하고 나와서 내 프로필을 보는 경우
