생명주기(Life-Cycle) 1차

이전에 Props나 State가 어떻게 전달되고 활용되는지 봤다. 이번엔 생명주기에 대해 알아보려한다. 

Lifecycle은 우리의 삶처럼 흡사한 개념을 가지고있다. 

REACT에서 컴포넌트는 생성 => 업데이트 => 제거의 생명주기를 가지고 있다.

 

공식API 문서에서도 나와 있듯이 자주 사용하는 메소드를 중심적으로 작성하려고 한다.

1. Mounting(생성)

컴포넌트가 생성자(constructor)에 의해 초기화되고, 렌더링 과정을 거쳐 DOM에 최초로 그려지는 단계이다.

 

실행순서는 다음과 같다.

 

1. constructor : 생성단계에서 컴포넌트를 초기화 시킨다.

constructor(props)

자세히 말하자면 아래의 두가지 목적을 위해 사용한다.

1. this.state에 객체를 할당하여 해당 컴포넌트 state(지역 state)를 초기화해준다.

this.state= { a:0, b:0 }

2. 인스턴스에 이벤트 처리 메서드를 바인딩해준다.

this.handleClick = this.handleClick.bind(this);

///

<Input onClick={theHandleCLick} />

 

 다른 메소드를 바인딩 하거나, state를 초기화 하는 작업이 없다면, 작성하지 않아도 된다. React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 반드시 super(props)를 호출해줘야 한다.

constructor(props) {
 super(props);
 this.state = {  }
 this.handleClick = this.handleClick.bind(this);
}

 

2. render : JSX로 작성된 코드를 JavaScript가 이해할 수 있도록 변환한 후 HTML 형태로 DOM에 그려질 수 있도록 돕는다.

render()

 

클래스 컴포넌트에서 반드시 구현되야하는 유일한 메소드이다. 함수형 컴포넌트를 작성 시에는 필요없음.

메서드가 호출되면 this.props와 this.state의 값을 활용하여 하나를 반환해야한다.

• react 엘리먼트 : JSX문법으로 작성되거나, <div />, <Component /> 같은 컴포넌트
• 배열과 Fragment : 여러개의 엘리먼트를 처리
• Portal : DOM 하위 트리에 자식 엘리먼트를 렌더링
• 문자열과 숫자 : DOM상에서 텍스트 노드로 렌더링
• Boolean 또는 Null : 아무것도 렌더링하지 않는다.

render() {
    <div>
      어쩌구저쩌구
      <Acomponent />
    </div>
}

 

3. componentDidMount() : MOUNTING이 완료되면 실행된다.

//statement

componentDidMount() {}

//statement

컴포넌트가 마운트 된 직후, DOM 노드가 있어야하는 초기화 작업은 이 메소드를 통해 이루어진다. 

 

2. UPDATE(업데이트)

컴포넌트에 전달한 props 혹은 state에 변화가 생길 경우 Updating 단계로 넘어간다. 변화가 생기면 변화가 필요한 HTML 부위만 찾아내어 그부분만 리렌더링(Re-rendering)을 진행한다. 

 

실행 순서는 다음과 같다.

 

1. render() : 2번째 단계에서 새로운 props를 받거나, setState()로 상태가 바뀌었거나때 해당하는 부분을 리-렌더링 해준다.

 

2. componentDidUpdate(): 컴포넌트가 갱신(렌더)되었을 때 DOM을 조작하기 위해 사용한다. 최초 렌더링에서는 호출되지 않는다.

componentDidUpdate(prevProps, prevState, snapshot) {}

 

 

아래 코드는 전형적인 사용 사례이다.

 

예시.

componentDidUpdate(prevProps) {
 if (this.props.userID !== prevProps.userID){
  this.fetchData(this.props.userID)
  }
}

setState()를 사용할 수 있지만, 위 조건문(if)로 감싸지 않으면 무한 반복이 발생할 수 있다. 

 

 

일단 생략

getDerivedStateFromProps

shouldComponentUpdate

getSnapshotBeforeUpdate

3. Unmounting(제거) 

마지막 단계인 제거할 때에는 아래의 메소드가 실행된다. 더 깊게 볼 것 없이 다음과 같은 메소드만 필요하다.

 

componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.

componentWillUnmount(){}

 

DOM에서 사라진 컴포넌트가 다시 DOM에 그려질 경우 처음 MOUNT(생성)단계로 돌아간다.

 

 

https://soldonii.tistory.com/113

ko.reactjs.org/docs/state-and-lifecycle.html