React Component LifeCycle API 이란?

정말 많이 쓰이는 API입니다. 컴포넌트가 DOM 위에 생성되는 상태에 따라 실행되는 메소드들입니다.

 

구성 요소에는 수명주기가 있습니다. 구성 요소는 인스턴스화, 마운트, 렌더링 및 업데이트, 마운트 해제 및 소멸됩니다. 라이프 사이클은 단순하고 일관된 추상화 계층을 제공하여 브라우저 API의 복잡성을 관리하는 데 도움이됩니다. 라이프 사이클을 사용하면 렌더링을보다 세밀하게 제어하기 위해 각 단계에서 사용자 지정 코드를 선택적으로 실행할 수도 있습니다.

구성 요소 수명주기의 각 단계를 살펴 보겠습니다.

 

Mounting Cycle

 

constructor(object props)

 

컴포넌트 클래스가 인스턴스화됩니다. 생성자에 대한 매개 변수 는 부모 요소에 의해 지정된대로 요소의 initial 입니다. 

선택적으로 객체를에 할당하여 요소의 초기 상태를 지정할 수 있습니다 . 

현재이 요소에 대해 기본 UI가 렌더링되지 않았습니다. propsthis.state

 

componentWillMount()

이 메소드는 렌더링이 처음으로 발생하기 전에 한 번만 호출됩니다. 현재이 요소에 대해 렌더링 된 기본 UI는 없습니다.

 

render() -> React Element

render 메소드는 렌더링하기 위해 React Element를 반환해야합니다 (또는 아무것도 렌더링하지 않으려면 null).

 

componentDidMount()

이 메소드는 렌더링이 처음 발생한 후 한 번만 호출됩니다. 이제이 요소의 기본 UI가 렌더링을 마치고 직접 조작하기 위해 액세스 할 수 있습니다 . 를 사용하여 비동기 API 호출을하거나 지연된 코드를 실행 해야하는 경우 일반적으로이 방법으로 수행해야합니다.this.refssetTimeout

Updating Cycle

componentWillReceiveProps(object nextProps)

이 구성 요소의 부모가 새로운 세트를 전달했습니다 . 이 구성 요소는 다시 렌더링됩니다. 

메소드가 호출 되기 전에 선택적 으로이 컴포넌트의 내부 상태를 업데이트하기 위해 호출 할 수 있습니다 .propsthis.setState()render

 

shouldComponentUpdate(object nextProps, object nextState) -> boolean

및 의 다음 값을 기반으로 구성 요소는 다시 렌더링하거나 다시 렌더링하지 않을 수 있습니다. 이 메소드의 기본 클래스 구현은 항상 리턴합니다 (구성 요소 를 다시 렌더링 해야 함 ). 최적화의 경우,이 메소드를 오버라이드 (override) 중 여부를 확인 또는 수정 된, 예를 들어, 이러한 객체에있는 각각의 키 / 값의 평등 테스트를 실행합니다. 리턴 하면 메소드가 호출되지 않습니다.props state true props state false render

 

componentWillUpdate(object nextProps, object nextState)

이 메소드는 다시 렌더링하기로 결정한 후에 호출됩니다. 업데이트가 이미 진행 중이므로 여기에 전화하지 않을 수 있습니다 .this.setState()

 

render() -> React Element

이 메소드는 return을 가정하여 호출 됩니다. render 메소드는 렌더링하기 위해 React Element를 반환해야합니다 (또는 아무것도 렌더링하지 않으려면 null).shouldComponentUpdatetrue

 

componentDidUpdate(object prevProps, object prevState)

이 메소드는 다시 렌더링이 발생한 후에 호출됩니다. 이 시점에서이 컴포넌트의 기본 UI가 메소드 에서 리턴 된 React 요소를 반영하도록 업데이트되었습니다 .render()

 

이글은 http://www.react.express/lifecycle_api 에서 참조한 글입니다. React를 시작하기에 앞서 기본중 기본으로 잘 외워둡시당