React) 컴포넌트의 수명주기 Lifecycle

컴포넌트의 수명주기 LifeCycle

---

리액트 컴포넌트에는 수명주기 Lifecycle이 있습니다. 수명은 페이지가 렌더링 되기 전 준비과정부터 페이지가 사라질 때가지를 말합니다.

프로젝트를 하다보면 컴포넌트를 렌더링 하기 전에 처리해야할 작업이 있고, 렌더링 이후에 업데이트 하기 전 후 처리해야 할 작업 등이 있습니다. 이렇게 컴포넌트 수명 주기에 따른 처리를 위해 사용하는 것이 라이프사이클 매소드 입니다. 이것은 클래스형 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hooks를 사용하여 비슷한 기능을 사용할 수 있습니다.

---

 

라이프 사이클의 종류

• 마운트 Mount 
• 업데이트 Update
• 언마운트 Unmount 

---

마운트 Mount

DOM이 생성되고 웹 브라우저 상에 컴포넌트들이 나타나는 것을 마운트라고 합니다. 

마운트를 할 때 여러 개의 메소드를 차례대로 호출합니다. 

1. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드 
   • constructor(props) { ... }
   • 초기 state 정의 
2. getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메소드
   • static getDerivedStateFromProps(nextProps, prevState) { ... }
3. render : 개발자가 짠 UI 코드를 렌더링하는 메소드
   
   • this.props 와 this.state 에 접근할 수 있읍
   • 아무것도 보여주고 싶지 않다면 null 또는 false return
   • 브라우저 DOM에 접근할 수 없음
   • DOM 정보를 가져오거나 state에 변화를 주려면 componentDidMount에서 처리해야 함 
4. componentDidMount : 컴포넌트가 브라우저 상에 나타난 이후에 호출하는 메소드 
   • 비동기 작업 처리 

 

---

업데이트 Update

컴포넌트는 다음 경우에서 업데이트를 합니다.

1. 부모 컴포넌트가 넘겨주는 props가 바뀔 때
2. 자신의 state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제 렌더링을 트리거할 때 

업데이트를 할 때는 다음 메소드들을 차례대로 호출합니다.

1. getDerivedStateFromProps : 변화가 일어난 props에 있는 값을 state에 넣을 때 사용하는 메소드
2. shouldComponentUpdate: 컴포넌트가 리렌더링되어야 할지 말아야 할지 여부를 결정하는 메소드
   1. true -> render 호출
   2. false -> 작업 취소 
3. render : 컴포넌트를 리렌더링 하는 메소드로 forceUpdate로 바로 수행될 수 있음
4. getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직접에 호출하는 메소드
   • 업데이트 직전의 값을 참고할 때 활용 ex) 스크롤바 위치 유지 
5. componentDidUpdate : 컴포넌트 업데이트 작업이 끝난 후 호출하는 메소드 
   • 리랜더링 완료 후 실행
   • prevState 또는 preProps를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근 가능 
   • getSnapshotBeforeUpdate에서 반환한 snapshot 값을 전달 받을 수 있음 

 

• example ) 

getSnapshotBeforeUpdate(prevProps, prevState) {
	if (prevState.array !== this.state.array) {
    	const { scrollTop, scrollHeight } = this.list
        return { scrollTop, scrollHeight };
    }
}

---

 

 

 

 

언마운트 Unmount

컴포넌트를 DOM에서 제거하는 것으로 componentWillUnmount 메소드만 호출합니다.

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

---

 

References

• 리액트를 다루는 기술 (김민준)