React Study - 7. 리액트의 라이프사이클(class형 컴포넌트)

리액트의 전체적인 흐름을 이해하기 위해서는 라이프 사이클에 대한 이해가 필요하다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 제공되기 때문에 클래스형 컴포넌트로 대략적인 컨셉에 대해 설명 후, 함수형 컴포넌트에서의 라이프 사이클에 대해 설명한다.

 

1. 라이프사이클 메서드 이해하기

리액트의 라이프사이클 메서드는 9가지가 있다. 큰 단위로는 마운트, 업데이트, 언마운트 이렇게 세 가지 영역으로 나뉠 수 있다.

• 마운트(Mount) : 페이지가 컴포넌트에 나타남 (페인팅)
• 업데이트(Update) : 컴포넌트의 정보를 업데이트 (리렌더링)
• 언마운트(Unmount) : 페이지에서 컴포넌트가 사라짐

1-1. 마운트(Mount)

컴포넌트가 처음으로 DOM에 그려질 때를 의미한다. 따라서 컴포넌트의 초기 설정과 데이터 가져오기 등의 작업을 수행하는 중요한 단계이다.  이 단계에서는 컴포넌트가 DOM에 삽입되기 전에 설정해야 하는 작업들을 수행한다. 구체적인 예는 다음과 같다.

 

- state 또는 props를 초기화하는 경우

- 외부 라이브러리 연결을 설정하는 경우

- 서버에서 data fetching해서 state를 업데이트 하는 경우

(* 위의 케이스들은 모두 componentDidMount()메소드에서 수행된다.)

 

 

1-2. 업데이트(Update)

업데이트를 발생시키는 요인 : state 변경 / props 변경 / 부모 컴포넌트의 리렌더링

위 케이스들에 대해 좀 더 자세히 설명해보자면,

 

• 부모 컴포넌트에서 넘겨주는 props가 바뀔 때
  컴포넌트에 전달하는 props가 바뀌면 컴포넌트의 렌더링이 이루어짐
• 컴포넌트 자신이 들고 있는 state가 setState를 통해 업데이트 될 때
• 부모 컴포넌트가 리렌더링 될 때
  이 때는 자신에게 할당된 props나 state가 바뀌지 않더라도 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트도 리렌더링 된다.

 

 

1-3. 언마운트(Unmount)

컴포넌트를 DOM에서 제거하는 것

메소드로는 componentWillUnmount가 있다.

• componentWillUnmount: 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드.

 

 

 

2. 라이프사이클 메서드 살펴보기

우리는 대부분 함수형 컴포넌트를 사용하고 있기 때문에, 자주 사용하는 메서드에 대해서 다루기로 한다.

 

2-1. render( ) 함수

• 라이프 사이클 메서드 중 유일한 필수 메서드
• this.props / this.state에 접근할 수 있음 - 리액트 요소를 반환한다. (JSX Element)
  * 아무것도 보여주고 싶지 않을 경우 : null / false 값 반환

2-2. constructor 메서드

• 생성자 메서드 - 초기 state를 설정한다.
• 컴포넌트를 만들 때 처음으로 실행된다.

 

2-3. componentDidMount 메서드

• 컴포넌트가 화면에 추가될 때 실행한다.

 

2-4. componentDidUpdate 메서드

componentDidUpdate(prevProps, prevState, snapshot) {...}

• props나 state으로 인해 리렌더링 완료 후 실행
• 업데이트가 끝난 직후이므로 DOM 관련 처리를 해도 무방하다.

 

2-5. componentWillUnmout 메서드

• 컴포넌트를 DOM에서 제거할 때 실행한다.
• componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있을 경우 여기서 제거 작업을 해줘야 한다.

 

 

 

 

 

 

 

ㅡ 본 글은 리액트를 다루는 기술 도서와 리액트 공식 문서를 참고하여 작성한 글입니다. ㅡ